« Boston CFUG's June meeting: Rob Huddleston on Flash Catalyst | Main | You'll need hubris to produce this demo »

Web app homescreen icons in Android

One of the nice features in Android and the iPhone is that you can save website bookmarks to the home screen with an icon that looks like any other app, giving web apps the same look as installed apps. But just how do you indicate which of your icons the mobile device should use?

When specifying an icon to display in a browser's tabs or address bar, we've long had a short and simple set of choices either a rel
<link rel="icon" href="/path/to/some.png" />
<link rel="shortcut icon" href="/path/to/some.ico" />

But for mobile devices, there are a few more tags that you will come across. Besides the shortcut icon tags mentioned above you have these choices:
<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

Android versions 1.5 and 1.6 will read the second tag (with "-precomposed"), and versions 2.1 and newer will read the first tag. Apple's and Google's specifications say that you should use 48x48 pixel PNGs, but you can use a large image, like Google does for its own apps, for a crisper result.

Unfortunately, even if you use these tags, your icon won't always show up correctly on Android. If your web site uses SSL but the certificate is expired or doesn't match your domain, then a standard bookmark icon will appear instead of your icon. And on HTC-manufactured phones with the Sense UI, you'll only see your icon as a small overlay on the bottom left of the regular bookmark icon. I hope that HTC and other manufacturers change this behavior in the future.

Lastly, there are a few configuration tags which Apple supports that Android has yet to implement (though I'm not sure whether they're each applicable).

Indicate whether to hide the browser's status bar on startup:
<meta name="apple-mobile-web-app-capable" content="yes" />

Indicate the color of the browser's status bar:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Indicate an image to display while the mobile web app is loading:
<link rel="apple-touch-startup-image" href="/path/to/some.png" />

Comments (13)

That's awesome that the Android phones will support the apple-related Link and Meta tags. That's gonna make things so much easier for mobile developers :)

@Ben, as I say in my post, I'm not sure whether the Android team is planning to support the meta tags. Do you know something I don't? I agree it would be awesome if they would support it, especially the startup image.

I don't know if Google will continue to support the Apple metatags (though I can't see any advantage to them removing the current support).

It looks like there are a few Android apps that let you customize the bookmark icons to whatever you like (BetterBookmarks, Bookmarks2, etc.)

learning how to play guitar is who is teaching you how to play

Thanks for the info here Tom, great to see that using one tag gets the job done on both the iPhone and Android platforms, makes it easy to implement. I read on another post that Google is using a 57 by 57 px png which is displaying nicely for me. I am going to increase the image size a bit for a nicer result.
Thanks again for the post and also great design for your site you have here, very very clean.

We're just building our mobile web app and this came helpful. It would be nice if there was a conventional name and path which phones would check for icons when they need them.

E.g. If you place your favicon under http://www.example.com/favicon.ico, browsers will just pick it up and no meta tags are needed.

I think even robots.txt would also be a better place to put information that is specific to some user agents, better than a meta tag and would avoid 404 requests if icons are just not there.

Rushed implementations.

Actually reading the official Apple documentation you linked above, it is clear that those icon meta tags are not necessary at all. Most people will want the same icons for the whole site. All you need to do is to put the PNGs in your root folder and name them using the correct naming convention. Meta tags are only needed if you want specific icons for different pages.

As it often happens, if you think the system could better designed, check and it might just work. I'd imagine this will work on Android too, just need to get the SDK emulator working and check.

Thanks, I have just been looking for info about this topic for a long time and yours is the greatest I've found out till now. However, what in regards to the bottom line? Are you positive in regards to the source?

Hi, I really loved reading your delightful blog a good friend of mine recommended it so I thought I'd take a peek.

This time, D has a rivalry on his hand as another group of supernatural hunters have also been hired - and they
have no problem with trying to take D down.
During the twentieth century, most conversion
has been done by African Christian Prophets and local leaders.
The mining companies preferred such segregation because it prevented
different ethnic groups from uniting around a common grievance [.

" Batman believes that Superman cannot be corrupted while Joker just laughs. "In the beginning was the Word, and the Word was with
God, and the Word was God. to relate more consciously to that
potential, so that her.

I blog often and I genuinely appreciate your information. This
great article has really peaked my interest. I will take a note
of your site and keep checking for new information about once a week.
I subscribed to your RSS feed as well.