How to Create a WebClip Bookmark Icon for your Site

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

Apple allows iPhone and iPod Touch users to add bookmarks to the home screen of their device. These bookmarks can be added for any web page and appear as an icon on the home screen. Apple calls these WebClip Bookmarks. By default, the icon used for this home screen is a thumbnail screenshot of the page in question, but Apple have provided a mechanism for site owners to specify an icon to be used instead.

WebClip icons work in a similar way to favicons. On adding a page to the home screen, Mobile Safari looks for a file in the root of the site called apple-touch-icon.png. If that file exists, it’s used instead of the thumbnail preview.

Here is the quick way, with three simple steps:

Create a 57px × 57px PNG.
Name it “apple-touch-icon.png”.
Upload it to the root folder of your website.

More advanced users can also specify which file should be used for the icon, allowing you to place the icon somewhere other than the root directory or giving the icon a different file name. This is done by adding a link element to the head of the document, you can then specify the path to the icon that should be used. You can use either a PNG or JPG as long as it is explicitly specified.

<link rel="apple-touch-icon" href="/myicon.jpg" />

The icon itself should be a flat square image. Unlike the favicon .ico format that can contain multiple sizes of the same icon there is no such need as this icon currently only has one use. Apple recommends your icons should be a 57px × 57px PNG. As mentioned above the file may also be a JPEG as long as it is specified in the header. Create a square image as Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application. It is worth noting that this process does cut off a few corner pixels to create rounded corners.

The above image shows the WebClip icon used on this site (left) and a mockup of how it appears on the an iPhone when Safari has done its magic adding rounded corners and a glassy sheen (right).

If you use an image larger than 57px × 57px Safari will automatically scale the image for you. From my own testing and research I have found icons created in Photoshop that are 60px × 60px at 163 ppi (the iPod Touch and iPhones native resolution) produce the best results.

When adding a bookmark you may notice a slight pause of a few seconds before the icon appears when you press “Add To Home Menu”. This is probably because the icon is only requested when you make a webclip instead of each time the page is loaded as is the case with favicon’s.

Adding an iPhone icon may be a bit of a novelty unless your site is aimed specifically at iPhone users but I think apple would have been better off utilising the existing de-facto standard favicon format for it’s WebClips instead of having to add device specific code. The ICO format allows for various size images to be embedded in the file already.

This article was posted on 16 October 2009 in iPhone

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.