Shortcut Icon for iPhone websites

June 13, 2010

You can bookmark a web site on the iphone and it will appear in the main list of applications on the phone. By default, it will appear with a scaled down version of the homepage as an icon, but you can control what image appears.

Either place a file called apple-touch-icon.png in the root of your web application, or if it is at a different path, add a reference to it in the HTML:

<link rel="apple-touch-icon" href="/site_media/apple-touch-icon.png"/>


If you don't want Apple's icon gloss to be applied, append -precomposed onto the rel string:

<link rel="apple-touch-icon-precomposed" href="/site_media/apple-touch-icon.png"/>