Test case: multiple touch icons for different device resolutions

Save this page to the home screen on your device of choice and see which touch icon comes up. Make sure to try it on different devices (with varying screen resolutions) and on differing firmware versions.

Here’s the code used for the touch icons:

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="//dummyimage.com/57x57.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png">
<!-- No such device exists yet, so if this value is used,
it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png">

Here are my results:

iOS version iPhone 3G S iPhone 4 (Retina display) iPad 1
3.2 (7W367a) Not tested Not tested 228×228 *
4.0.2 (8A400) 228×228 * 228×228 * 228×228 *
4.1 (8B117) 228×228 * 228×228 * 228×228 *
4.2 (8C134) 57×57 114×114 72×72

Android 2.3 Gingerbread doesn’t seem to support the sizes attribute. Instead, it just uses the @href value of the first <link element with rel=apple-touch-icon or rel=apple-touch-icon-precomposed. In this example, it would use the 57×57 touch icon. (Tested on a Nexus One running Android 2.3.3.)

* This particular value is meaningless; it just means that the sizes attribute is ignored on this system. In this case, the last value for apple-touch-icon in the document will be used.