Creating a Favicon for Your Website

by Curtiss   |   last updated June 30, 2010   |   Web Tutorials ·

When developing a new website, one of the last things that usually gets done is designing and creating a “favorite” icon for the site. The favicon is an icon that gets displayed in various places for your website visitors. Visitors using tabbed browsers (IE7 and 8, Firefox 2+, Chrome, Safari and Opera) will see the favicon at the left edge of the tab marker; the icon will be used in the bookmarks menu and/or toolbar when the visitor bookmarks your website; it is used as the shortcut icon on Windows when someone creates a desktop shortcut for the website and more.

Although it is possible to use GIF, PNG, JPG and BMP files as your favicon, browser support can sometimes be really inconsistent for those file formats. However, the Windows icon (ICO) format is pretty universally supported, and allows a great deal more flexibility than some of the other file formats.

Unfortunately, however, Photoshop users have probably figured out by now that PS does not support the ICO file format and are probably scratching their heads trying to figure out how to create a favicon file. There are plug-ins available for both Photoshop and Fireworks that allow designers to export images as ICO files, but those may not be ideal for all users.

Instead, you can easily download The GIMP for free (available on Windows, Linux and Mac), which has native support for ICO files.

1. Once you have The GIMP installed on your computer, open it up and create a new 64×64 pixel image.
2. Find or create the image you want to use as your favicon and make sure it’s sized down to 64×64 pixels. Copy and paste that image into your new 64×64 workspace.
3. Make sure that the first layer has a solid color background (most likely white, but it can be just about any color).
4. Create a new 64×64 pixel layer in your new workspace. Make sure this one has a transparent background.
5. Paste the same image you pasted on the bottom layer onto this new layer.
6. Create a new 32×32 pixel layer (positioned in the top-left corner of the workspace, which it should be by default). Make sure this layer has a solid-color background.
7. Resize and optimize your original image to 32×32 pixels; copy it and paste it into your new 32×32 layer.
8. Create another 32×32 layer, this time with a transparent background, and paste the same 32×32 image into this new layer.
9. Create a new 16×16 layer with a solid background.
10. Resize and optimize your original image to 16×16 pixels; copy it and paste it into your new 16×16 layer.
11. Create one more 16×16 layer, with a transparent background, and paste your 16×16 icon into this new layer.

Once finished, you should have a new image with six layers. They should be as follows (listed from bottom to top):

1. 64×64 pixel with solid-color background
2. 64×64 pixel with transparent background
3. 32×32 pixel with solid-color background
4. 32×32 pixel with transparent background
5. 16×16 pixel with solid-color background
6. 16×16 pixel with transparent background

If you do not plan to use any transparency with your icon, you can skip the three transparent layers, keeping just the three layers with the solid-color background. Also, if, for some reason you think you might need a 128×128 pixel icon, you can certainly create those layers (the same way you created the other pairs of layers) at the bottom of the image. Some people also choose to create 48×48 pixel versions in between the 64×64 and 32×32 versions. Usually, though, most applications of the icon file utilize one of the three versions listed above.

Most browsers use the 16×16 versions for the tab icons and for the bookmarks menu/toolbar. Windows generally uses the 32×32 version for the desktop and standard implementations of shortcut icons within folders, occasionally using a 64×64 icon when displaying large icons.

Once you’ve create the multi-layered file, save it as favicon.ico. After you tell GIMP to save the file, you will be confronted with a dialog message asking you to specify a quality for each layer of the file. Usually, each of the transparent layers should be set to “32bpp, 8-bit alpha, no palette.” The solid-color layers can usually be saved at 24bpp or lower. The nice thing is, GIMP provides a preview of what the layer looks like with the settings you choose, so you can do a little testing before saving. For the 16×16 solid-color layer, you can probably even sample it down to 4bpp without sacrificing the image quality much.

Once you’ve finished saving the new ICO file, you should upload it to the root HTML directory for your website (so that, for example, if your website is located at http://www.example.com/, the ICO file will be accessible at http://www.example.com/favicon.ico). You can upload it to a different location and specify that location with the meta tag shown below, but, again, browser support for this feature is extremely inconsistent, so I would caution against it.

Finally, modify the <head> area of your pages (this step is usually not necessary to get the icon to show up in the appropriate places, but it does help various web-based applications and APIs locate the icon), adding the following meta tags.

<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico" />

I have uploaded a sample favicon file with the six layers mentioned above. You can download the example icon and open it in the GIMP to see how the file should be structured (since the ICO file format maintains the layer structure).