HTML5 Boilerplate Favicon PSD-Template

by Graphic Design References

Hey there…

This post is 1196 days old. It was written on 12.09.2011. Please make sure to be careful with the information provided and check a more recent source on this topic.

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

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.


Pingback: Icons | Art 337 »

Wouter Broekman

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.


Jon Humphrey

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


Tommy

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


Leave a Comment

Remember what your mother told you: Be friendly. Your email address will not be published.
Markdown-Goodies available.