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.

If you have any information or thoughts on this please let me know!

Update (3/24/2011)

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!

Both comments and pings are currently closed.

Discussion

Ugh, favicon.ico all over again…

There should be a standard, like touch-icon.png in the root of the site. No brand names in the filename, and no <meta> bullshit in your HTML.

Nice research!

Yes and yes! If mobile web apps are going to seriously compete with native apps we’ll need standards like those.

Mobile vendors should just use the standard <link rel="icon" sizes> for this stuff.

It seems that Droid X running 2.2 ignores these tags and instead uses the favicon overlayed on top of a screenshot of the site (a tight crop of the top left of the page).

Very disappointing.

What would work much better as a standard, would be to have a single, scalable SVG image referenced under a standardised file name.

That way, any user-agent could use it for whatever purpose they want and display it clearly at whatever size they require.

Non-Apple browsers should not legitimise Apple’s non-standard extensions. I’m really unhappy that Apple is polluting the web. Where’s your usual anti-IE hate when Safari Mobile does the same thing to mobile web?

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.

http://zevbrokeit.posterous.com/relapple-touch-icon-no-longer-validates

@Zev: I have now registered the apple-touch-icon and apple-touch-icon-precomposed link relations, and Henri Sivonen has already updated validator.nu to reflect this. They’re valid now :)

Erik Muller

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…

Erik,
Really? Even the pages that explicitly link to the icon in the HTML?

Is it supported to add and then change it with javascript to that apple’s format?

I’m using Samsung Galaxy S with Android 2.3.3

It works for me if I add it as a bookmark and then add to home screen.

It doesnt work if I add to home screen directly from settings.

Any idea why?

Nice information :-)

Could you do some update for newer Versions :-)