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.

Android 2.2

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" or 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.

Android 2.1

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.

It’s not ideal that “apple-touch-icon” has become standard, but it’s been adopted widely as the best practice for a while now.

Confusing things, I just started getting validation errors since it’s not a registered rel value. Is there a new way to include large format icons for smartphones and tablets? For example, would using rel=”icon” with the appropriate sizes property work across platforms? I’ve had mixed results testing it. The desktop browsers I’ve tried only use the last linked image as the favicon.

I’ve run a test with my HTC Desire HD, Android 2.3.3. I’ve copied your test pages over to my testing server in order to view the access log. Unfortunately, none of the testing pages resulted in a request for one of the apple-touch-icons…