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 (5)
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.