Adding Touch Icons to your site

Apple iPod Touch - Home Screen
Jan
19

With the release of the 1.13 firmware for the iPhone and iPod Touch it is possible to add your own touch icons - and it's easy to do!

Adding a touch icon (aka WebClip Bookmarks) to your site is actually easier than you might think. To start with, create your image with the dimensions of 57 pixels by 57 pixels such as the one below:

iPhone/Touch Icon

Now upload it to wherever you want, and then edit your page so that the following line is in the head section of the page:

<link rel="apple-touch-icon" href="/images/neo-touchicon.png" />

In the above example I named my touch icon neo-touchicon.png and put it in my images folder.

There is an even simpler way, and that is to just upload the image as apple-touch-icon.png into the root of your site - but if you want to use your own filename, or put it somewhere different then you need to use the link.

Now when visiting your page form an iPhone you can add it to your home screen. There is no need to add the usual glassy effect to the image you create as the phone / iPod will put this effect in for you.

your comments - Post a comment

blog comments powered by Disqus