Apple iPod Touch / iPhone icon

First there were 'favicons' - when you visit websites from your PC a small icon  gets displayed in the address bar of your browser and in your Favourites folder. I can remember reading forum discussions on why people were seeing 404’s (missing file) for a file called favicon.ico a few years back.

This was a complement really, as originally it meant a visitor had added your website to their ‘Favourites/Bookmarks’ which caused the browser to look for the file.

Now in this new mobile world where literally millions of iPhones and iPod Touchs have been sold there is a new icon to create.

When iPod/iPhone users add a website to their device the Apple s/w looks for a file called apple-touch-icon.png – if you happen to see this in your visitor logs then again it’s a complement as a visitor has decided to add your site to their iPod !

Creating a custom icon/logo for these users is easier than creating favicons. All you need to do is create a smallish square graphic named "apple-touch-icon.png" and place it in your website’s root directory.

For my website I created my original icon 100 x 100 pixels in Macromedia Fireworks and saved as a ‘png’ file.

Apple will automatically round the corners, resize and add a glass effect for you! So it’s worth leaving a small margin around your graphic so it doesn’t get cropped.

If you don’t want the glass effect to be added then use the file name: apple-touch-icon-precomposed.png

As always I’ve created a page on my Freeola website to show you some images of my icon as I created it and how Apple added it’s effects when it’s displayed on an iPod Touch: hmmm's  apple-touch-icon


As I’m using a sub-domain I also added the tag below to my HTML to ensure the icon was found:

<link rel="apple-touch-icon" href="http://www.hmmm.ip3.co.uk/ apple-touch-icon.png"/>


A simple tip to cater for this new type of visitor…





^{Search Freeola Chat}