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.
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.
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.
Such was the media hype and frenzy around the launch of the iPad that 300,000 were sold on the very first day! [more...]