HTML5 Boilerplate Favicon PSD-Template

by Graphic Design References

Hey there…

This post is 1086 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.

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.


Leave a Comment

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