Touch-Icons for Android-Devices: Y U No Working?

Sven asked me some stuff about the HTML5 Boilerplate Favicon PSD-Template while he was using it for a project. He discovered one problem I was not aware of and I don’t know how to work around: Android does not use one of the apple-touch-icons as a bookmark or as a shortcut on the home-screen in Android 2.3.

I do not know of any other usage of the icons in prior versions of Android. But this article by Rob Flaherty stats that it is working for Android 2.1 and 2.2 with some minor changes.
He also set up this demo-page. Feel free to test with this and share your results in the comments. It was not working for me though.
Android 2.3 uses the standard favicon for shortcuts on the home-screen and screenshots for bookmarks.

As always I’m linking back on one of Mathias Bynens great articles. He writes about touch icons and stuff. Read this for more information how to use icons properly.

Do you have any suggestions how to get the icons working, at least for the home-screen icon? This works very nice with the Apple devices (iPhone and iPad).

Is it only me or do you also think that there is pretty good stuff going on with Android in general but there’s a but pretty often when it comes to some minor thinks like for example touch icons. That’s bad :(.

HTML5 Boilerplate Favicon PSD-Template

No longer maintained

Version 3.1 – Update 25.11.2012

Add current 16x16px favicon.

Version 3.0 – Update 25.05.2012

And again Daniel updated the template with some great things.
It now features the “new” HTML5 Boilerplate icons, you get a better overview of what icons are present and how the output of images is.
Apart from that Daniel made a bug-fix for the 144×144px touch icon where the PNG wasn’t saved by default.

Version 2.0 – Update 21.03.2012

Daniel has updated the favicon template with a 144×144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built into the latest version of the iPad. A version of this is also included in HTML5 Boilerplate by default. Please read this issue for more information and remember Mathias’ article, which he updated recently.

Thanks goes out to Daniel.

I’m using HTML5 Boilerplate (H5BP) for nearly all of my projects at the moment. Why? Mh, I think mostly because it provides best practice for so many things concerning front-end development. With H5BP I learned how to use favicons (or touch icons) in different variations for smartphones and stuff properly.

Friend and boss Daniel designed a nice PSD template to create the various icons you need. It has four different sizes and includes slices and meta-information for everything. You just need to include your favicon, “Save for Web” and you’re done.

He gives it away for free. So feel free to download and share. It would be pretty nice if you check out his Twitter-stream and follow him.

Preview   Download PSD


Please be aware that you also should add an apple-touch-icon.png. You could do this by copying apple-touch-icon-57x57-precomposed.png and rename this. Thanks Sven for the heads up.

A Note on .ico

Since you should always use a .ico file for the favicon in order to get it working in Internet Explorer I would advice you to open favicon.png in Photoshop and use the ICOFormat plugin to generate the .ico file.

Multi-Layer Favicons

Jon R. Humphrey made a layered favicon template and shared it on GitHub. Please check it out, it might be more helpful than this template from time to time.