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:
- 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.
- Upload both of them to your root directory. It is usually “public_html” or “www” folder.
- 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…