The established method of creating a favicon is to convert a 16 × 16 image into .ico format. The easiest but least compatible method is to save the same image in one of several possible formats. The latter method works in modern browsers, but older ones, such as IE6, will have problems with using an image as a favicon in this way.

In either case, using the code shown below will cause the browser to use the image as a favicon.

PhotoShop has no option to save a file in .ico format. To convert the file, you must use a separate tool. (My personal, sentimental favorite is chami.com.)

Once your .ico file is generated, upload it to the root of your web site. All pages that wish to display the favicon must link to it. Obviously, we can’t use an <a> tag — we don’t want the users to “go to” the icon, just use it in our page.

There are a number of tags that are used to “pull” content from sources external to a web page into the page itself. The img tag obviously does so for images. You may have encountered the object tag, which fulfills a similar role for other external media files such as Flash clips, QuickTime movies and audio. Another is the link tag, which is used for (among other things) external style sheets. We’ll use it in that context in the CSS section — for now, we’re going to use link to bring the favicon file into our page.

The link tag must be written inside the head section of the document, and closed inside itself. In the case of a .ico file, the code will look something like this:

<link rel="shortcut icon" href="favicon.ico">

If you choose to use a PNG file instead:

<link rel="shortcut icon" href="favicon.png">

That’s it! Note that most modern browsers will detect the favicon.ico file without an explicit link, so long as the file is in the correct location.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.