Once upon a time, web designers & developers had it easy when it came to the venerable favicon. Our tiny .ico files served a much greater purpose than their meager 16×16 square pixels would suggest. These humble graphics allowed us to populate the status bars, tabs, and bookmarks of our visitors’ browsers with our emblems. They were a test of our ability to communicate our brands in a strictly limited number of pixels.
With the advent of high-resolution displays and touch devices, mostly but not entirely from Apple, the favicon exploded into a variety of dimensions, formats, and purposes. Some still fulfill their duties in the good old desktop browser, some appear as web app icons on mobile devices, and some are automatically slurped up for other purposes by apps like Reeder and Transmit.
The latest version of HTML5 Boilerplate has codified seven different versions as the current baseline requirement for any self-respecting modern site. For an in-depth look at what each of these various files are for, and how to implement them, look no further than Mathias Bynens’ Everything You Always Wanted to Know About Touch Icons.
Hans Christian’s HTML5 Boilerplate Favicon PSD Template is indispensable for anyone wishing to easily create the full array of icons at once. But for those web, UI, UX, or just-plain-design designers that prefer to do this type of work in Adobe Fireworks (as do I) rather than Photoshop alone, I’ve created an alternative template. I’ve mostly followed Christian’s lead, with the exception of including a 32×32 pixel favicon for certain browsers on high-resolution displays (such as Safari and Chrome on the MacBook Pro), as detailed by Enrappture.
John Gruber of Daring Fireball brought this issue back to prominence with his post How to Create Retina-Caliber Favicons. In short, he recommends creating a single .ico file with 16×16 and 32×32 resources, which affords the designer the greatest control over how the favicon will appear in different contexts. Chris Coyier of CSS-Tricks countered that this strategy adds complexity and results in a larger file. His rule of thumb is that with a simple, clean design, a favicon containing a single 32×32 resource ought to scale well. The important takeaway is, of course: test and see.
The free Photoshop plugin ICO (Windows Icon) Format is the cheapest and most straightforward choice for web designers who decide to go the single-resouce route. If you want to get fancy with your favicons, you can use software such as Kodlian’s Icon Slate or IconFactory’s IconBuilder to create a single favicon file that includes both 16×16 and 32×32 resources.
I hope at least some fellow designers find this template file useful. Please feel free to comment below if you have any suggestions or feedback.
Version 1.1
2013-01-10
Download Template
Version History:
- Version 1.1, January 10, 2013: This post and accompanying Adobe Fireworks template file revised for clarity, particularly on the topic of supporting high resolution devices as recently debated on Daring Fireball and CSS-Tricks.
- Version 1.0, September 12, 2012: Initial release.
Leave a Reply