seraphwu / h5bp-multi-layer-favicons

Standing on the shoulders of giants I offer this tweaked photoshop template to help create both touch icons for a site as well as a multi-layered favicon utilising the currently recommended ratios!

H5BP Multi-Layer FavIcons

Standing on the shoulders of giants I offer this tweaked photoshop template to help create both the Touch icons for a site as well as a multi-layered favicon utilising the currently recommended ratios!

Based on the work of Hans Christian Rienl, and following in the footsteps of others, this template will hopefully streamline your touch and favourite icon creation. **

---

Once you've opened this template in Photoshop follow these simple steps to icon bliss in 10 minutes or less:

##Simple steps:##

1. Double click the 144x144 smart object layer
2. Add your icon to the newly opened psb
3. After editing the contents, choose "File > Save" to commit the changes
4. View PSD again ... Voilà!
5. Choose "File > Save for web"
6. Shift-click each icon slice to add in the dialogue
7. Choose "Selected slices" from the "Slices" dropdown
8. Click "Save"
9. Choose your file location
10. Open same file location when save completed
11. Right-click the newly generated "MultiLayer1-195x195.png" image
12. Choose "Open with ..." locate "GIMP"
13. Once opened in Gimp, Right-click the canvas and choose "File > Open as layers"
14. Select the 5 other MultiLayer images sequentially
15. Once loaded, and ordered as desired, choose "File > Save As" OR "File > Export"**
16. Rename file as "favicon.ico", thereby overwriting the current extension, and click "Save"
17. Bazinga!

** Please note: Gimp prior to v2.8 used the "Save As" command to export accordingly, version 2.8 or greater uses the "Export" command instead; thanks to Linuxbastard for pointing this out!

###Related Links:###

• http://mathiasbynens.be/notes/touch-icons
• http://www.netmagazine.com/features/create-perfect-favicon
• http://drublic.de/blog/html5-boilerplate-favicons-psd-template/
• http://www.thedorkreport.com/favicon-apple-touch-icon-adobe-fireworks-template/
• http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp
• http://www.gimp.org/

Thanks to all for their hard work before me! @precisioncoding

** Please note, you will need to have both Photoshop and Gimp installed:

• Adobe Photoshop™
• The GNU Image Manipulation Program