Ping!

Did you ever notice some websites when added to your Home screen on your iPhone, iPod Touch, iPad, or Android device; that the bookmark appears as a Icon instead of some generic thumbnail of your website or that annoying red bookmark icon for Andriod?

Well here is how you create one:

  1. Make a .PNG file that is 57 x 57 pixels. Save it as a “apple-touch-icon.png” and a “apple-touch-icon-precomposed.png.” Yes 2 files of the same thing. I used my original file that I used for my favicon.ico.
  2. Upload both of them to your root directory. It is usually “public_html” or “www” folder.
  3. Add the following code to your Header code or header.php on your WordPress template file:

<link rel=”apple-touch-icon” href=”http://drunkendwarf.net/apple-touch-icon.png” />
<link rel=”apple-touch-icon-precomposed” href=”http://drunkendwarf.net/apple-touch-icon-precomposed.png”/>

Don’t forget to change the URL. The experience of making my favicon.ico file made this seem easy.  I encountered no difficulties making my .png files.  When I put my files in my root directory my WordPress website did not load my .png icons when I created my bookmarks.  I had to put the exact url with the <link rel…> code. Well to my fellow bloggers I hope this helped.

‘Til next time…

! Guntitan

Leave a Reply