Mobile Bookmark Touch Icons

I love the homescreen on Android. I’m constantly updating it, changing what icons and widgets I have on which screen and experimenting with different launchers (although I’ve not been tempted away from the default so far as I’m on an unmodified version of Android 2.3.4).

The other day I came to add martindownton.eu as a shortcut (for when I get around to playing with CSS media queries) and was presented with my favicon, which I was expecting, but placed inside a rosette, which I wasn’t.

Thinking about this it is quite an elegant solution to an awkward problem as generally a favicon can be as small as 16 x 16 px. Stretching this up to 72 x 72 px, or 4.5 times the size, would look terrible.

So how do you get a larger icon?

How to get a larger icon

To get a larger icon there is a tag that can be added to the head of your site. I cringed a bit when I saw the syntax as the link tag needed requires a rel attribute with a value of “apple-touch-icon”. Looking further into this there is no standard for bookmark icons and Apples solution was already in place when Android came to the table so it made sense for them to implement this technique.

Here is the syntax for adding the icon:

As you can see there are three different link tags here. These are to cover iOS as the icon size changed between iOS3 and iOS4 and there is also a larger icon size for the iPad. You will of course have to resize your icon three times to match each of these specifications, the three sizes being 57px, 72px and 114px squared.

So looking at the screenshot, I initially created the bookmark without these tags added which produced the icon on the left, and now with the tags in place we get a full icon as desired. I’m not sure what result you get on iOS as I have no means of testing it. Tweet me if you know!

#postaweek2011 9/52