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
<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" />