Create a web site icon for iPhone users

Add website icon to your iPhone's home screen

The little icons associated with a web page or site, favicons, have been around for a while now, and most sites (including this one) have one associated with them.

Now the iPhone is with us, and Apple has introduced a similar concept with its ‘webclip’ icon, a little icon that is shown on your the iPhone’s screen allowing quick and easy access to your site.

In this brief tutorial, I’ll explain how you can create your own webclip icon and have it on your iPhone in minutes.

Setting up a webclip icon is very similar to that of favicons in that you have two options:

  1. Save a 57×57 webclip image as ‘apple-touch-icon.png’ and place it in the root of your website.
  2. Save the square webclip image (not necessarily 57×57) as a GIF, JPEG or PNG, and then add the following to your html head section: <link rel='apple-touch-icon' href='/path/to/webclip.jpg'/>. Note that the image need not be saved in the root of the site, and can be doesn’t need to be called apple-touch-icon.png.

iPhones running version 1.1.3 will then be able to add the webclip icon by browsing to the website and selecting the ‘Add to Home Screen’ link from the ‘+’ icon at the bottom of the iPhone screen. Once the icon has been added to the home screen, you’ll notice the Apple gloss that’s been much imitated of late and you’ll have a handy little icon directly to your site. In addition, rounded corners and a drop shadow are added.

Applying padding to the original image to account for rounded corners

If your image has detail around the edge, you may find that some of the detail is lost when the rounded corners are applied. With some experimentation, I’ve found that applying some natural padding around the outside of the image works well.