Web Site Cookbook

8.3. Creating a Favicon

Problem

You want to create a graphical icon that appears in front of your web site's address, both in their browser's location bar and their bookmarks menu.

Solution

First, create a simplified, high-contrast version of your logo, or a new stripped-down glyph that will adequately represent your site. Because the end result will be 16 pixels square and use only 16 colors, there's not much room for creativity (see Figures 8-1 and 8-2).

Figure 8-1. Yahoo's favicon is a simple red "Y" that matches the typography of the site's logo

Figure 8-2. For a site I worked on recently, I cropped the glyph in the site's logo and used it as the favicon

Next, adjust the canvas size so the original image that will become your favicon is a square. Then, resize the original image to 16x16 pixels and save it as a 16-color PNG or GIF.

Open the PNG or GIF in a graphics application capable of creating Windows icon (.ico) files (Despite the name of the file type, there are several non-Windows graphics applications and browsers that can create and view favicons). I use GraphicConverter.

Tip

Photoshop does not save files in .ico format, but there is a third-party plug-in that adds this functionality. Other options are listed in the "See Also" section of this Recipe.

Save the file as favicon.ico and ...