Scenic Overlook

Internet Explorer 5 has a new feature: it recognizes an "icon" associated with a website, and it will store that icon when the site is bookmarked. Then ever time a browser looks at his favorites folder they will see not only the name of the site, but also the icon. And, when they click to go to that page, the icon will also appear at the left end of the Address Window (instead of the IE icon).

How Do I Do This?

The technique is relatively simple. An icon file named favicon.ico must be:

1. Placed in the root directory of the domain, or
    
2. Placed in the directory of each page that might be bookmarked, or
    
3. Referenced in the HTML of each page that might be bookmarked.

If you own your own domain, option 1 is the easiest. Put the file in the root. (This is where the primary index.htm file is located.)

If you do not own your own domain (e.g., you are using a free host) then place the file in the directory of the index.htm file and every other directory containing a page that might be bookmarked.

Alternatively, you can add HTML to each page that might be bookmarked to reference the favicon.ico file.

If you wish to use the HTML approach, use the following HTML

<link REL="SHORTCUT ICON" href="http://path/favicon.ico">

Just substitute the appropriate path for your website.

Note that if you use the directory approach it is not necessary to use the HTML. The HTML approach is suitable if:

1. You cannot use the directory approach, or
    
2. You want to have a different icon on different pages.

What Is the Favicon.ico File?

It is not a graphic. Rather, it is a special, proprietary format, repository of "bitmap like" graphics. There are four types of images that might be "contained":

1. A 16x16 pixel file, with the standard 16 Windows colors.
    
2. A 16x16 pixel file, with 256 colors.
    
3. A 32x32 pixel file, with the standard 16 Windows colors.
    
4. A 32x32 pixel file, with 256 colors.

Most sites use the "safe" answer: a 16x16 pixel file in 16 colors.

But the main point of all this is that the .ico is not just a graphic. Rather, it is a special format file created from a graphic file.

How Do I Create the Favicon.ico File?

An easy way to create a .ico file is to use one of the web-based services shown below.

There are two approaches

1. Create a 16x16, 16 color graphic and convert it into a .ico file.
    
2. Use a web-based service to create it directly.

Favicon.com: An entire site just about the Favicon.ico. Includes an online Icon editor. Also has a free, download trial version that will let you import another file.   ««»»

FavIcon Tracker: A free Perl script to analyze a web log looking for requests for "favicon.ico" to determine the approximate location of bookmark requests.   ««»»

Favicon.ico: How To and Tools: Very short article, but includes a link to Bitmap To Icon 2.5, which is a free tool to convert BMP files to ICO files.   ««»»

How to Add a Shortcut Icon to a Web Page: Microsoft's article on how to do this.  ««»»

Pay Off A: This site offers both stock and custom ICO files for webmasters. ««»»

Last updated:
18:17, Thu, 27.Mar.2008