Adding an Icon for Your Web Site

Most browsers now support associating a small image with your Web site and displaying it in the Address bar, Favorites menu, or elsewhere. These little images are called favicons, which is short for Favorites Icon.

To add an icon for your Web site:

1.	Create a 16 pixel by 16 pixel image.
2.	In the head section of your (X)HTML document, type <link rel="icon" href="favicon.ico" type="image/x-icon"/>, where favicon.ico is the name and location of your icon on your server.
3.	For compatibility with Internet Explorer, add Microsoft's proprietary syntax as well: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Figure 5.40. Favicon icons, in real life, are even smaller than the one shown at left. They measure a measly 16 by 16 pixels.

Figure 5.41. Use both link syntaxes to ensure compatibility across browsers.

Tips

• Favicons should generally be saved in .ico format, an icon format developed by Microsoft that contains various sizes and bit depths of a small image. You can find a useful plug-in from Telegraphics for creating .ico format icons in Photoshop (http://www.telegraphics.com.au/sw/).

  Figure 5.42. The favicon is typically used in the Address bar, Favorites menu, and in Tabs.

  

• Some browsers, but not Internet Explorer, also support favicons in GIF (including animated GIFs) and PNG format. Be sure to use the proper MIME type for type.

• Internet Explorer originally required the favicon.ico file to be placed in the root directory of your Web site. This is no longer the case, though browsers may still look there if the link element is not present (or is not understood, say by older browsers).

Figure 5.43. Because Tabs are often gray or colored, you may want to make your icon's background transparent.