Create a WebClip icon for the iPhone or iPod Touch

Contributed by carotids January 16, 2008  
Tagged: Apple iPhone

Webclip bookmarks are safari bookmarks that users can place on the home screen of the iPhone or iPod Touch. As a webmaster, you can control the appearance of this icon using the same method as favicon.ico is used.

Webmasters are now used to creating favicons. For whatever reason, safari on iPhone / iPod Touch does not use the familiar favicon when making webclip bookmarks.

To specify a unique webclip bookmark do the following.

1. Create the icon with the following size 57×57 pixels. There is no reason to try to emulate the glass effect. The iPod Touch / iPhone software will create that for you on the viewer’s end.

2. Name the icon: apple-touch-icon.png and place it in the root of your web-exposed directory.

If placed correctly, you will be able to view it using the following syntax in the browser:

http://www.yourserver.com/apple-touch-icon.png

3. Alternatively, if you want to name your file uniquely, you can add additional coding to your web structure.

Within the head section of the page, put a standard link element pointing to your icon:

<link rel="apple-touch-icon" href="/youricon.png"/>