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!
Latest commit bbb04bb Nov 8, 2013 @jonrandahl Merge pull request #3 from lavoiesl/master
Added a link to an ImageMagick script
Failed to load latest commit information.
PSD with files! Jan 10, 2013
images updated image name Jan 10, 2013
README.md Added a link to an ImageMagick script Nov 8, 2013

README.md

H5BP-Multi-Layer-FavIcons

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:

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

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