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 (8)
June 23, 2010
10:47PM | #
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 :)
June 23, 2010
11:20PM | #
@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.
June 24, 2010
8:06AM | #
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.)
January 21, 2011
7:39PM | #
learning how to play guitar is who is teaching you how to play
April 10, 2011
4:02PM | #
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.
November 18, 2012
8:25AM | #
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.
November 18, 2012
9:29AM | #
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.
May 2, 2013
5:17PM | #
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?