Recipe 8.3. Creating a Favicon | Web Site Cookbook: Solutions & Examples for Building and Administering Your Web Site (Cookbooks (OReilly))

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.

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 upload it to the root directory of your web server.

Some browsers don't require you to alter your HTML code for the favicon to start showing up as long as it's in the root directory of your web server (and named favicon.ico). Also, browsers might cache the icon, so if you change it and don't see the change reflected, you might need to clear your browser cache. To ensure that your favicon displays in all browsers that support them, you should add a <link> tag to the <head> section of the pages on which you want to show the favicon. If you want to save the favicon somewhere other than your root directory or specify different favicons for different pages of sections of your site, you can do that with the <link> tag, too:

 <link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon">

Discussion

Favicons were introduced with Version 4.0 of Internet Explorer for Windows. In fact, the Microsoft browser would request the favicon from the web server even if it didn't exist, and there was no link to it in the web page code. That clever little browser behavior led to a lot of webmaster consternation over the 404 errors noting a missing file (messages that filled their server logs). Several other newer browsers now support favicons, including Internet Explorer 5 and 6 (on Windows only), Netscape 7, Firefox and Mozilla (since Version 1.31), Opera (since Version 7), and Safari (for Macintosh).