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.

17 Replies to “HTML5 Boilerplate Favicon PSD-Template”

  1. Pingback: Icons | Art 337 »
  2. 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.

      1. 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!

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *