For Apple devices with the iOS operating system version 1.1.3 or later, such as the iPod Touch, iPhone, and iPad, as well as some Android devices, it is possible to provide a custom icon that users can display on their Home screens using the Web Clip feature (called Add to Home Screen within Mobile Safari). This feature is enabled by supplying a
<link rel="apple-touch-icon" ...> in the
<head> section of documents served by the web site. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.
The recommended basic size for this icon is 60×60 pixels; for best display on the higher-resolution iPhone 4 screen, an icon size of 120×120 pixels is recommended.
For the iPad and iPad 2, the basic size is 76×76 pixels. For the third-generation iPad, the high-resolution size would be 152×152 pixels.
The icon file referenced by
apple-touch-icon is modified to add rounded corners, drop shadow, and reflective shine. Alternatively, an
apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.
With rounded corners, reflective shine
<link rel="apple-touch-icon" href="somepath/image.png" />
Without reflective shine
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />
As in case of
favicon.ico file, browsers and mobile devices do not require any HTML to retrieve these icons.Default location for the files are
apple-touch-icon.png (in order of priority) located in the web site's root.