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, 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:##
- Double click the 144x144 smart object layer
- Add your icon
- Save psb
- Choose "Save for web"
- Shift-click each icon slice to add
- Choose "Selected slices"
- Choose "Save"
- Choose location
- Open location when save is complete
- Right-click "MultiLayer1-195x195.png" image and choose "Open with ..." locate "GIMP"
- Right-click canvas and choose "Import as layers"
- Select all other 5 MultiLayer images sequentially
- Once loaded, choose "Save as"
- Rename file as "favicon.ico" including extension Done!
###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/