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.
Additions
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.
Hi Hans, great resource! Thanks to your boss also ;) On my Photoshop the 16×16 isn’t updated, do you know if I’m doing something wrong?
Great blog by the way, I’m also a member of Fronteers and trying to up my skills recently with html5, boilerplate/bootstrap and less.
Well, it was just the default icon which had a micro update. Nothing that changes a lot :)
All the best with learning about the latest web technologies.
I think what he/she meant is that the 16×16 is the only one that doesn’t update after editing the smart object. I simply hid the favicon layer under the 16×16 folder and all was good.
Thanks for this!
Hans,
What about using a multi-layered favicon? I’ve been creating these by following the steps outlined in the link below, what are your thoughts on this?
J
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp
Thanks for the idea :). I don’t use Gimp and I think there not so many people using Gimp. I guess it’s easily possible to use this technique in photoshop too. As I am not an expert I think it would be best to leave it like that. If you are willing to build one please let me know. I’d love to share it here.
Hans Christian,
Cheers for the kick on the thread, here’s the repository link as requested:
https://github.com/jonrandahl/H5BP-Multi-Layer-FavIcons/
Can’t wait to see how it can be improved further!
Thank you for your time and patience,
Jon
Added it to the article. Thank you, Jon!
This article seems to be missing one of the main pieces of information…
How to generate the standard .ico favicon file, I know it’s in the PSD instructions. But, it took me a while to find it and I think it might have been logical to explain this on this page, with a link (a link!? on a web page?!)
Anyway, here’s the link from the PSD instructions:
http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat
I’ve updated the post to reflect this shortcoming. Thanks for the pointer.