Web site icon on the iPhone, iPad and iPod – create Webclip icon

This short and sweet tip explains how to create a Webclip icon (akin to a Favicon) which is used by the iPhone, iPad and the iPod Touch. Typically, when a user on one of these devices adds your web site to their “Home” screen, the web site homepage snapshot is placed as the icon. A better bet is to get a web site icon of your logo to appear on the iPad, iPhone or iPod.

Webclip icon: a web site icon for the Apple devices

Creating a Webclip icon is a very simple affair. Take the logo and save it as a png file. I think this image needs to be a square but am not sure. Anyway, ensure that it’s more than 60×60 pixels in dimensions. I used one which was 120 pixels!

Important: Your image doesn’t need to have rounded corners. The Apple device styles the image in this way when it saves it as a web site icon.

Name this image: apple-touch-icon.png and upload it to the document root on your web server – the same directory that holds the index.html or equivalent file.

That’s it! You’ve successfully created a web site icon for the iPhone, iPad and the iPod Touch.

By the way, just as with Favicons, you can also use the <link> tag to point to the Webclip icon if you want to use a different file name. Thus,
<link rel=”apple-touch-icon” href=”filename.gif” />

I used the image to the left (without the grey 1 pixel border) as the Webclip icon of this site.

Add the web site icon on an iPad, iPhone or iPod Touch

Here is how you can add the web site icon to the iPad (or the iPhone). SImply follow the four steps below and refer to the slideshow if in doubt.

1. Load web site in the Safari web browser.
2. Tap the ‘forward’ button on the iPad or ‘+’ on the iPhone – [Slide 1]. Choose “Add to Home Screen” from the menu.
3. The web site icon should appear if it exists. By default the first new characters of the site’s title tag will be shown. Obviously you would like to get rid of that and enter a most descriptive name for the Webclip icon – [Slide 2]. Tap on “Add” when done.
4. You’ll find that the web site icon has been added on your iPad – [Slide 3].