Create a WebClip icon for the iPhone or iPod Touch

Posted January 16, 2008 by carotids in 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:

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"/>

The Conversation

Follow the reactions below and share your own thoughts.