This morning, I decided to create a proper favicon, namely a multi-resolution favicon with transparency.
For those who don't know what Favicons are, they're little graphical icons which represent specific websites, that are particularly useful for distinguishing between tabs in modern tabbed web browsers (like Opera, Firefox, Konqueror, and Safari... and much more recently, Microsoft's laggard Internet Explorer 7.0) and other tabbed document interfaces. They have a further application: recent developments on the web like Mozilla's (open source) Prism project and Adobe's (proprietary) Air allow you to turn web applications into something that behaves more like a desktop application. These require icons for new contexts like application launchers, menu bars, toolbars, and on the desktop.
To provide the maximum favicon compatibility and utility, this morning I wanted to work out how to create a multi-resolution favicon.ico file, preferably with proper full alpha transparency.
Most favicons are created only for the web browser context, which by default is 16x16 pixels. This is fine in that context, but increasingly, favicons are being used in other contexts as well, usually larger. Low resolution 16x16 favicons look ghastly and pixelated when enlarged to sizes like 32x32, 64x64, or 128x128 pixels for other contexts, like the application icons for application launcher bars and application toolbars.
Although most Web Standards compliant browsers can deal with favicons in a variety of formats like GIF, JPG or the more suitable PNG formats, the Microsoft Windows Icon format (.ico) is the lowest common denominator for favicons, in that they're recognised by MS's Internet Explorer 6.0 and later versions (as well as Opera, Firefox, Konqueror, Safari, etc.). ICO files have the additional property that they (somewhat non-intuitively) can contain multiple images within one file, namely multiple versions of the same icon, but at different colour depths and pixel resolutions.
To provide the maximum favicon compatibility and utility, this morning I wanted to work out how to create a multi-resolution favicon.ico file, preferably with proper full alpha transparency (which allows variable transparency, allowing icons without coloured backgrounds to look smooth and professional on any background over which they might be superimposed).
On principle, I like to achieve my computing ends using only open source software. A quick Google search indicated that I could create .ico files with the excellent free image manipulation package, The GIMP (available for Linux, other X11 platforms, MS Windows, and Mac OS X - it can even work with most files produced by Adobe's heavily proprietary Photoshop). Unsurprisingly, I run it happily on Linux (in fact, I first used the GIMP on Linux in 1996, about 8 years before it was available for Windows or OS X...), and encourage you to try it on whatever computing platform you use most often.
Here's how I did it:
- Fire up The GIMP on your machine. Download it for free if you don't already have it. The GIMP, and its open source counterpart Inkscape make great replacements for the heavyweight (and very costly) Adobe Photoshop and Illustrator suite for raster and vector graphics respectively...
- Do whatever you have to to load up a large version of the brand or logo you want to make into a favicon. I recommend that it be at least 128 by 128 pixels in size.
- Copy the image (to avoid inadvertently saving over your actual logo image!) - I used File->Save As... to achieve this.
- Make your logo a square image, i.e. with the same pixel width and height. The easiest way to do this is to use the right-click menu over the image itself - go to Image->Canvas Size... Go to the part of the window where you can set the canvas dimensions, and click on the chain links. This allows you to specify the width and the height for the image independently - I recommend making the small of the two dimensions equal to the larger (you might want to centre the resulting image by dragging with your mouse). Or, if your logo image allows it, you can use the Cropping tool to crop the image into a square shape so long as you don't lose anything important (e.g. part of the logo, drop shadows, etc.). Don't be too precious about it, and consider how well aspects of your logo will come across when they're tiny. For instance, if your logo includes text... I'd suggest you lose it. It'll be a little illegible blob at 16x16 pixels.
- Once you've got a square logo, you can create reduced size versions of it. The standard sizes for icons are 128x128, 64x64, 48x48, 32x32, and 16x16 pixels. Flatten your image (if it has layers) and then save it into each of these sizes in turn. To do so:
- Right click over the image, select Image->Scale Image...
- Put in the width of the image, e.g. 128. If you then hit TAB or click in the height field, you'll see that it will automatically jump to the same dimension. That's because, by default, The GIMP scales image dimensions in proportion to the original image size so that the image content doesn't get distorted (i.e. look too fat or to thin) in the process of scaling the image - that's what the little "chain" icon to the right of the image dimensions indicates.
- Click "Scale" to scale the image.
- Save your image (File->Save As) as, e.g. favicon64.png (if it's the 64x64 version) or favicon16.png, etc. By providing the .png file suffix, The GIMP will automatically save it in PNG* format. It's probably most convenient to put these files into the same directory as the original logo image...
- The GIMP will give you various PNG saving options - it's safe to hit "OK", i.e. select the defaults, for all of them.
- Now that the reduced icon image is saved, hit CTRL-Z to undo the resize - you should be looking at the full-size logo image again - and repeat the process for another icon size.
- Once you have created the full gamut of icon file sizes, you can create the .ico image. Open the largest of the icon images in The GIMP. Right-click on the image and select File->Open as Layers... and select all the other icon images.
- This will create a single image with a layer containing each of the other icon images.
- Save the image as a Microsoft Windows Icon (.ico) image - File->Save As..., and then type in the filename, e.g. favicon.ico. (this will automatically select the .ico format)
- Upon saving the .ico image, you can specify the bits-per-pixel (bpp) for each layer independently. I just left mine at the defaults.
- You're done - now copy the favicon.ico to your webserver, and ensure that it's in the right place (by default, IE 6.0 looks for /favicon.ico in your top level webserver directory). Give it a try! Note - if you already had a favicon of some sort for the site, it might already be cached by your browser, and as such might take a while to be visible. Try restarting your browser, or, better yet if you're using a crappy browser like Microsoft's Internet Explorer 6 or 7... download and install Firefox - the favicon won't be cached in that browser yet!
The result is a .ico file with multiple versions of your logo at different resolutions. Now, depending on the context, visitors to your site will see your nice favicon in their browser tabs, superimposed on whatever browser chrome they're using in all of its transparent glory. Similarly, if they use Adobe Air or Prism to create an icon for your site on their desktop, or want to save your site on their iPhones, they should get the appropriately sized full-resolution icon for their launch menu, or desktop! One point to note: there's no reason that the logo needs to be the same at each resolution. I suppose you could add a bit of text, e.g. a company name, etc. for the higher resolution versions of the logo, but you'd have to test things to make sure it's readable at the relevant resolutions.
The result is a .ico file with multiple versions of your logo at different resolutions. Now, depending on the context, visitors to your site will see your nice favicon in their browser tabs, superimposed on whatever browser chrome they're using in all of its transparent glory.
* Choose your file format wisely. TIFs (often used by Mac people) are a good image format for high-fidelity photo work, but totally inappropriate for the web, because they are bulky (lots of bytes) and tend not to be supported by most browsers. JPGs are an option, but if your logo is a line drawing or a computer-generated image (as most logos are), they tend to provide a poor reproduction due to their "lossy compression algorithms" (don't ask - beyond the scope of this article) particularly at small sizes - plus JPG doesn't support transparency at all. GIF images offer only 1 bit alpha transparency (on or off) which leads to icons with jagged edges that tend to blend with their backgrounds like oil does with water (i.e. not). The PNG format supports 8 to 32 bit transparency, allowing for those smooth feathered edges that look much better to even the untrained eye, so that's the best starting point. It's specifically designed for the web, but unfortunately, Microsoft didn't have the foresight to implement support for PNG's graphical capabilities in IE 6. Luckily, IE6 is slowly dying out on the Web (as people move to better browsers like Firefox).
This article was first published by Dave Lane on the Egressive website on 09-Aug-2008. Egressive was purchased by Catalyst IT on 1 December 2012. Read more on the acquisition of Egressive.