Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy, and I’m sure you already know how this works using HTML:
<!-- In its simplest form: -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">(It’s a shame Apple didn’t just implement the standard <link rel=icon> and chose to come up with a more verbose proprietary link relation instead.)
Apple iOS has supported touch icons since iOS 1.1.3. What’s weird is that Android 2.1+ also has apple-touch-iconsupport (with a few quirks).
For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Android has a default icon, and some systems fall back to the favicon if it’s available.
Fancy effects
iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen (as it does with application icons). Specifically, iOS adds:
- Rounded corners
- Drop shadow
- Reflective shine
As of iOS 2.0, you can prevent the addition of these effects by using the precomposed keyword:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">Since the rel attribute accepts a space-separated list of values in HTML, theoretically it should be possible to fall back to the regular icon with added effects for iOS 1 without requiring an extra <link> element:
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">In practice, however, it doesn’t work that way. iOS 4.2 seems to ignore the entire declaration if you’re using the space-separated value technique.
I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.
Different icon sizes
The Web Clip Icons section in the iOS HIG states that for iPhone and iPod Touch, you should create the following icons:
- one that measures 144 × 144 pixels for high-resolution iPad ‘Retina’ displays;
- one that measures 114 × 114 pixels for high-resolution iPhone ‘Retina’ displays;
- one that measures 57 × 57 pixels for everything else.
For iPads without a high-resolution display (the first two generations), a 72 × 72 pixel icon can be used.
It’s perfectly possible to just create one high-resolution icon and use that for all devices. In fact, this is how Apple does it. Devices with smaller screens or lower display resolutions will automatically resize the icon. The downside is that these devices will load the large high-quality image, while a much smaller file would have worked just as well. This wastes bandwidth and affects performance negatively for the end user.
Luckily, as of iOS 4.2 it’s possible to specify multiple icons for different device resolutions by using the sizesattribute:
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">A few simple rules apply here:
- If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used.
- If there are no icons larger than the recommended size, the largest icon is used.
- If multiple icons are suitable, the icon that has the
precomposedkeyword is used.
But it gets more complicated. Pre-4.2 versions of iOS simply ignore the sizes attribute, so the above code snippet would be interpreted as:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">Only the last value in the document will be used on those systems. In this case, that’s the largest icon. Depending on how you look at it, it might be better to reverse the order of icons:
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">This way, older iOS versions download the smallest icon instead of the largest one. So, instead of forcing the largest icon to all devices unless they support the sizes attribute (iOS 4.2+), we now serve the smallest icon unless @sizesis supported. In other words, we’re now using progressive enhancement instead of graceful degradation 🙂
When in doubt, always use this snippet. With support for nearly all iOS versions and devices, and as many different Android versions as possible, it’s the most robust way to add touch icons to your site.
I’ve had several people test this on a Nexus One running Android 2.3 (Gingerbread), and it seems @sizes is not supported there either. However, it behaves differently than old iOS versions: instead of using the last <link>element’s @href value, it will use that of the first <link> element with rel="apple-touch-icon" or rel="apple-touch-icon-precomposed". In the case of the above code snippet, that’s the largest icon available.
Look ma, no HTML!
If no icons are specified in the HTML, the website root directory will be searched for icons with the apple-touch-iconor apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order:
apple-touch-icon-57x57-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-precomposed.pngapple-touch-icon.png
That’s right — for iOS, it’s not necessary to use HTML to add touch icons to your site, even if you want to use multiple resolution-specific icons. Say adiós to the boatload of proprietary <link rel="apple-touch-icon"> elements on every single HTML page. Just create different versions of the icon, use the correct file names and place them in the root. (favicon.ico, anyone?)
So, what do we need?
apple-touch-icon-57x57-precomposed.pngorapple-touch-icon-57x57.pngfor non-Retina iPhone and iPod Touch;apple-touch-icon-72x72-precomposed.pngorapple-touch-icon-72x72.pngfor the first- and second-generation iPad;apple-touch-icon-114x114-precomposed.pngorapple-touch-icon-114x114.pngfor iPhone 4+ (with Retina Display);apple-touch-icon-144x144-precomposed.pngorapple-touch-icon-144x144.pngfor iPad 3+ (with Retina Display);apple-touch-icon-precomposed.pngandapple-touch-icon.pngas a fallback for everything else (possibly including non-Apple devices).
It’s a good idea to include both apple-touch-icon.png and apple-touch-icon-precomposed.png for maximum compatibility: iOS 1 and BlackBerry OS6 don’t support precomposed icons. (Note that Android 2.1 only supportsprecomposed icons.) You could use rewrite rules to avoid having to duplicate the file.
Sadly, the no-HTML approach doesn’t work on Android yet (tested in 2.3 Gingerbread), although I’m sure it will be supported in a future version. I haven’t been able to test Android 3 (Honeycomb) or BlackBerry OS6 yet. If you want, you can test this technique on my website. Save a bookmark to this page to your home screen, and see if you get a custom touch icon or not. Please let me know what you find out!