Why your site needs a favicon Posted by John H


Date: March 2, 2012

What's that you say? A favicon! A small detail, yes, but one to not overlook for it is an extension of your website and your brand.

Favicons are visible in all the major browsers, displayed in the tabs or in the location bar (and sometimes both.) They also show up in your list of bookmarks/favorites (hence the name). 

Favicons are tricky to create for many reasons, most importantly size and format.

A single favicon file can contain several sizes. The most important size is 16x16 pixels as that is what is typically displayed in the browser tabs and menus. Double that to 32x32 and that is what IE 9 uses to pin the site to the taskbar so those 2 sizes are essential.

You can also include 48x48, 64x64 and even 128x128 but keep in mind the more you add, the larger the file size so best to include only what is needed.

16x16 pixels is a tiny canvas to work with. Most logos and other graphics are barely legible when reduced to that size so the design needs to be greatly simplified and viewed at the target resolution when editing. For example, Google uses just their "g" but added the primary colors used in their logo so it still looks like Google. Also, you can add transparency but know that it could end up on white or several shades of gray and maybe even some colors so you'll want to test thoroughly.

The most reliable format is the Windows icon format (.ico) this is currently the only one that will work across all the major browsers and is capable of including all the sizes and the alpha channel for transparancy. The .png format is next best but guess which browser doesn't like it? (hint IE.) 

Creating a multi-resolution .ico file can be a challenge. You can use Adobe Photoshop to do the design, but I would not recommend using it for the final export as it can be 10x the file size needed and does a horrible job with the transparency and different resolutions.

I recommend exporting out .png images at the various sizes and use Gimp to composite the final file.

Sound like a hassle? It is. We would be happy to create one for you! Contact us for more info.