If you’re interested in giving your iPhone and iPad users a nice shiny (or even not-so-shiny!) icon when they add your page to their home screen, this article is for you.
The shiny icons you see when you save a web page to your home screen is called a Web Clip Icon.
To add an icon for Safari on iOS all you need to do is add a PNG image called apple-touch-icon.png to your web root. This is similar to how favicon’s work. If you’d prefer to not have the glossy effect applied to your icon, simply call the file apple-touch-icon-precomposed.png and it will display as is.
Alternatively you can specify an icon by using the following:
<link rel=”apple-touch-icon” href=”/custom_icon.png”/>
If you’d like to create high resolution icons for each iOS device, you can individually target each device like so:
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />
For more information visit the Safari Developer Library at http://goo.gl/I79Ey, you can also get a detailed list of all of the available image metrics and examples at http://goo.gl/CAwnh.
