Apple’s mobile Safari web browser can add an icon, for the displayed website, to the home screen. Clicking on the icon will open the website page.
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>
By default the icon created is a thumbnail of the website home screen. To replace the thumbnail image references are added to files on the website.
Alternatively files of the correct size and name can be saved to the root of the website. The Apple device will search for the desired image, if none is specified within the HTML code.
The Apple touch icons are very much like the favicon file created to represent a website, except these are sized according to the Apple device, as given in the table below:
| Size | Device |
|---|---|
| 57×57 | non-retina iPhone pre iOS 7 |
| 72×72 | non-retina iPad pre iOS 7 |
| 76×76 | non-retina iPad iOS 7 |
| 114×114 | retina iPhone pre iOS 7 |
| 120×120 | retina iPhone iOS 7 |
| 144×144 | retina iPad pre iOS 7 |
| 152×152 | retina iPad iOS 7 |
Apple Touch icons can be considered to be important regards mobile optimisation in respect of SEO.
<link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" type="image/png" /> <link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" type="image/png" sizes="72x72" /> <link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" type="image/png" sizes="114x114" />
References to the images are to be placed in the header of the HTML website file. The images can be located anywhere within the website, although at the root of the website may be preferred.
Note that Android devices are also able to make use of these images, resizing and using the most appropriate size.
Adding the extension -precomposed into the name of the image, will leave the image as designed. for example:
<link href="/apple-touch-icon-72x72-precomposed.png" rel="apple-touch-icon" type="image/png" sizes="72x72" />
If you prefer the rendered icon to be as you have designed, rather than the addition of the Apple device’s light shading then the above is recommended. its possible that your icon won’t work well with the Apple modified light shading.
The default icon image file name is apple-touch-icon.png. It should be of size 114×114 and able to be resized as necessary. If the metatag definitions are not found, for some reason, on a page, this icon will then be available for use.
There is more information available on Apple’s Configuring Web Applications page.
