Creating an iPhone Website Icon : 16th January 2008
With the latest software update to the iPhone, it is now possible to add ‘WebClips’ to your home screen. This is essentially a quick bookmark to a website, complete with an icon. By default, the iPhone will take a tiny screenshot of the site to use as an icon – with a little work however, you can customize the icon used to make it look just as you’d like.
There are two simple steps to create an icon:
- Create a 57×57px PNG file to use as the icon – pick something bold that well respresents your site
- Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site
The great thing is that the iPhone will automatically alter the WebClip icon to fit the style of the other icons, adding rounded corners and the glossy effect.
To apply the icon a different way, you can insert a <link> element similar to <link rel=“apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.
If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded. Give it a few seconds!
For the official guide, you can have a look at the Apple iPhone Dev Site.
Comments and Discussion
Thanks very much for this post! Very useful, very easy! Wish more sites would take advantage
Thanks for the INFO! Now i just need to make an icon that small!
This is a good piece of info that I would truly like to work on!! Thanks for the details.
