Remember the excitement you had when you realised you could customise that little 16×16 icon next to your web address in the browser? (called a favicon) – Well today I’ve re-experienced that feeling with the discovery that we can customise the icon used when you add a bookmark to the homescreen on the iPhone or iPod Touch!

Adding a favicon to your website is simple, and so is adding a WebClip Bookmark Icon:

1. Create a 57×57 pixel PNG image
2. Name it “apple-touch-icon.png”
3. Upload it to the root of your website (ie yourdomain.com/apple-touch-icon.png)

Some tips and things to remember…

• - You can use an image larger that 57×57 – but it will be automagically shrunk down to size
• - The glossy / glassy effect is automatically added so no need to include this on your actual icon image
• - Leave some space around your icon as the corners will be cropped/rounded.
• - When you click “Add to Home Screen” on your iPhone/iPod Touch, I noticed it can take a second or two for the icon to update.
• - When you click “Add to Home Screen” on your iPhone/iPod Touch, I noticed it can take a second or two for the icon to update.
• - You can specify a different icon image to be used for different pages – to do this add the following line of code to the section of the page: <link rel="apple-touch-icon" href="/custom-icon.png" />

And here’s how it turned out…

• Screenshot of the iPod Touch with Icon
• Creative World Icon

Now go forth and create…

How did your WebClip Bookmark Icon turn out? I’d love to see them so let me know and share any tips in the comments below.

Tags: Favicon, Icon, iPhone, iPod Touch, Tutorial, WebClip