Setting Icons for Your Web Site For Bookmarks and Favorites
This tutorial is tested with Internet Explorer 7, Firefox 2, and Opera 9.2 on Windows XP.
Setting Icons for Your Site

Icons are used for Bookmarks (or Favorites in Internet Explorer) and appear in the browser's address bar. The standard icons look like these:

Firefox:

Internet Explorer:

You can change the icon in two ways:

  • The old way, which was made popular by Internet Explorer is to put an icon file named favicon.ico on the root folder of your web server. Most browsers will look for this file and use it when it's available. If it's not available, then the default icon (which the browsers decide and looks like above) will be used.

    There are some problem with this approach: browsers use up bandwith and CPU when looking for the file favicon.ico file. It also clutters web-logs with not found errors when the icon is not present. Secondly, it is impossible to use multiple icons on different pages because there's no way to specify to use fifferent icon file to use on different pages.
      
  • The newer way, which overcomes the shortcoming of the first method is to use the <link> tag. The syntax is as follows:
      
    <link rel="icon" type=ImageType href=URL/>

    Where ImageType can be one of these (but currently, Internet Explorer version 7 only supports image/vsd.microsoft.ico. Firefox 2 supports all three):
    • "image/gif"
    • "image/png"
    • "image/vsd.microsoft.ico"

    Since this code is on per-page basis, it allows you to specify a file to be used as the icon and has the extra benefit of enabling different icons frot different pages. The tag must appear between <head> and </head> tags. The href parameter could refer to the the same as favicon.ico in mthod 1 (eq: "/favicon.ico"), or it could be any valid icon file that is accessible on on your server. There are some issues however as not all browsers support all formats. This is described in more detail later.

Below is an example where I tell a page to use this icon file: example1a.ico.
  
<link rel="shortcut icon" 
type="image/vsd.microsoft.ico" href="example1a.ico" />
Click here to see an example page.

If you use both methods, the second method takes precedence. Combining both has the benefit of allowing you to fallback to the favicon; and whenever you want a different icon in some pages, you can explicitly assign the icon.

Icons Varieties

There are varities in dimensions and number of colors in icons, such as:

  • Size, recommended are: 16x16, 24x24, or 32x32 pixels.
  • Color-depth, recommended are: 8 bit (256 colors), or 24 bit (thousands od colors)
  • File format: png, gif, or ico.

These varieties can be daunting and some browsers support even more formats and more colors. The most common format is 16x16 pixels dimensions with 256 colors. If you must have only one variety, use that settings.

This brings another another benefit of using ico file: An ico file can contain multiple images with different settings (multiple dimensions and multiple color-resulutions), which enable the operating system to pick the one that fits the user system best. (Note: once you add a website shortcut, the OS takes over the icon display). The operating system will scale the icon if the desired dimensions is not present in the ico file. Having multiple versions of the images makes them look better.

In XP, the behavior seems to be that when a particular size is not available, it fallsback to the default Favorite icon. For example, a large icon will usually be used if the user place a shortcut on the Desktop.

Here's an example of what happens when icons get scaled because a larger resolution isn't present (actual screenshot of Thumbnails view and Icons view in Windows Explorer).

32-bit ico file also supports alpha channel transparency which allows for smooth edges. Here's an example of icon with transparency on the desktop. Without transparency, there would have been a white square enclosing the icon. (How did the shortcut get into the desktop? By dragging the link from their Bookmark folder onto the desktop).

Example
Example

Icons Creation

With gif and png icons, you can use your favorite image editor to create the icons. Just make sure the format conforms to the supported specs. However, the lack of Internet Explorer support make these formats less appealing.

Thankfully, you can always create the image in any image editor such as Photoshop or Fireworks and then import the image into an icon editor that converts them into ico file. I recommend using png becauese of the alpha channel support.

 

So, create the image in your favorite editor (preferanbly with transparency) and then use other program to import and exports the image as ico files. Again, make sure that the dimensions meets the spec above.

Some of the programs that can convert images to ico files are the free IcoFX at http://icofx.xhost.ro/ or XN Resource Editor at http://www.wilsonc.demon.co.uk/d10resourceeditor.htm. (Note: I'm not affiliated with them.) These two allow you to import images of most formats (GIF and PNG and JPG included) and then export them as ico file. They also support alpha channels and multiple dimensions, which makes creating icons a breeze.

IcoFX

XN Resource Editor

Other places that may of interest is the Online icon maker at http://www.rw-designer.com/online_icon_maker.php and some free icons at http://www.freeiconsweb.com/.

Troubleshooting
  
Here are some problems that you may encounter and what to do:
  • Testing locally on files (on your hard-drive) does not work with Internet Explorer 7; instead, the html page and the icon file must be on the server or the default icon will still be used by Internet Explorer. (Firefox can test on local-files.)
  • The href parameter path may not behave the same way on your local machine as in the server. So, if you test locally, make sure the path is correct. If nothing seems to work, I suggest uploading the icon file to the server. Use absolute path to rule out problem of not finding the ico file. For example:
    <link rel="shortcut icon" type="image/vsd.microsoft.ico"
      href="http://www.yourwebsite.com/example.ico" />
  • If your server is Unix-type machine, remember that filenames are case-sensitive (i.e.: do not name favico.ico as FavIco.ico or it won't be found).
  • Internet Explorer 6 will not use a custom icon specified for a page until the user adds the page into Favorites. See http://msdn2.microsoft.com/en-us/library/ms537656.aspx.
    This behavior has been changed in IE7 - although I found it still a bit funky (sometime I needed to return to a page to see the icon changes).