Getting Android to Recognize Apple Touch Icons
On the Twitters yesterday I saw this tweet about how Android 2.2 uses Apple Touch icons when you add a bookmarked page to the home screen. Did you know this? I didn’t. Some googling revealed that this is a fairly known feature but that there were questions about when it worked and when it didn’t. So I fired up the Android emulator and tested out a few cases.
Caveat: these results are based on the behavior of the Android SDK emulator and the default Android browser. I don’t own an Android phone and am not familiar with any idiosyncrasies that may exist between various manufacturer implementations of the OS (some talk on stackoverflow suggests that it may not work at all on some HTC phones). Which is to say, YMMV. If you have an Android phone and would like to report back your results, I’ll update this post with the data.
To get iOS devices to recognize Apple Touch icons you just have to place the icon in the root directory and name the file “apple-touch-icon.png”. Optionally, you can declare the icon with the
rel attribute value “apple-touch-icon”, but this is unnecessary if the file is placed in the root with the proper filename. It works the same as favicons.
Android 2.2 works a little differently. Based on my tests, Android will use an Apple Touch icon for the home screen only if you reference it with
rel="apple-touch-icon-precomposed". Just having the icon in the root with the correct filename is not enough.
If you have an Android 2.2 phone and want to try this out, compare apple.com, which has an Apple Touch icon at the root but does not reference it with a link element, with twitter.com, which does use a link. I also set up some test pages that I’ll link to at the end of the post.
The same goes for Android 2.1 with one extra catch: 2.1 will only use the icon if you link to it with a rel value of “apple-touch-icon-precomposed”. (The purpose of this precomposed option is to instruct iOS devices not to apply the standard iOS gloss and rounded corner effects when adding the icon to the home screen.)
So if you want both 2.1 and 2.2 to use your Apple Touch icon, make sure to use the precomposed option.
Some people have reported that Android will not recognize the icon if you reference it with a relative URL. My tests with the emulator did not show this to be the case.
Here are the test pages I used. I tested other pages on different domains and the results were consistent with what these test pages returned.
If you have any information or thoughts on this please let me know!
Mathias Bynens has d0ne some great research on this topic and you can read all about it in his post, Everything you always wanted to know about touch icons. Check it out!