Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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!
Branch: master

Merge pull request #3 from lavoiesl/master

Added a link to an ImageMagick script
latest commit bbb04bb31c
@jonrandahl authored
Failed to load latest commit information.
PSD with files!
images updated image name
README.md Added a link to an ImageMagick script

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:

Something went wrong with that request. Please try again.