• FrontPage Index
• Related Topics:
  Custom Cursors for
  Your Web Pages
  Controlling Scrollbar Colour

Get Yourself Noticed with a Favicon

In business everyone's looking for a way to stand out from the crowd. Successful brands take advantage of any and every opportunity to display their company logo. Naturally, those opportunities extend to the web and with the arrival of Internet Explorer 5 Microsoft gave us yet another place to display our company logos. The Favicon had arrived!

What is a Favicon?

The name refers to an icon file, often named favicon.ico, which is displayed on the Favorites menu (hence the name) and many other places when you create a shortcut to a web page. Sites using a Favicon have their chosen logo displayed instead of the usual Internet Shortcut icon wherever the shortcut to their site appears.

When you use a Favicon the first thing the visitor notices is that your logo appears next to your URL in the browser's address bar:

becomes...

When you visit a site that uses a Favicon your browser downloads the icon file and stores it in the Temporary Internet Files folder. Unlike the other files stored there Favicon files do not normally have an expiry date and are not deleted when you choose to delete the temporary internet files. If you use Internet Explorer you can check the contents of your Temporary Internet files folder by choosing Tools > Internet Options and in the General section of the dialog box click the Settings button. In the next dialog box click the View Files button to open the Temporary Internet Files folder. You can group files by type by clicking the Type heading near the top of the window. If you have visited any sites that use a Favicon you will see them listed here:

Favicons are supported by Internet Explorer 5 and later, and by Netscape 6 and later. They are increasingly being discovered by web site owners. Here is a selection featuring some well-known names:

Where Does the Favicon Appear?

Once the browser has a downloaded a copy of the Favicon file it will be displayed anywhere a shortcut to its site appears. Without your visitor having to do anything a link displaying the associated Favicon will appear on the browser's History bar and the drop-down list of Typed URLs on the browser's address bar:

The History Bar	The Typed URLs List

If the visitor add the page to their Favorites it will appear on both the Favorites bar and the Favorites menu (as well as the various other places where Windows displays a list of Favorites):

The Favorites Bar	The Favorites Menu

The Favicon will be displayed on the Internet Explorer Links bar if the user places a shortcut there. They can do this by dragging the page's icon from the Address Bar to the Links bar or by placing a shortcut into the Links folder of the Favorites menu.

The Favicon will be displayed on the user's desktop if they right-click on the web page and choose Create Shortcut or go to File > Send > Shortcut to Desktop.

First Get Yourself an Icon

If you don't already have a suitable icon you will have to get one from somewhere, or make one yourself. A web search will return many sites offering free icon files but for a business site you will probably want to make your own. The popular graphics packages such as Paint Shop Pro and Photoshop don't support the .ico file format. You can use these programs to create your artwork but you will have to get an icon editing program such as Icon Forge or Microangelo to build the file for you. Check out your favourite download site for shareware or freeware icon editing programs. There are lots available and most allow you to create your icon from scratch, or to paste in a ready-made graphic from another program.

To create my own icon, I used Paint Shop Pro to build the original images and Icon Forge to create the icon file.

Icons come in various sizes. An icon that is to be used as a Favicon should be 16x16 pixels. Some icon editors can create Multi-resolution icons. A Multi-resolution icon is a single file which contains images of several different resolutions. The most common combinations are 16x16, 32x32 and 48x48 pixels. My own Favicon is a multi-resolution file containing these three images:

16x16	32x32	48x48

Although not essential, you should use a multi-resolution icon if you can. Windows displays the Favicon at 16x16 pixels in the Address bar and on most of the locations mentioned earlier, but if you place a shortcut on the desktop it is displayed at 32x32. When you create a multi-resolution icon you can include images that look their best at each of your chosen resolutions.

If yours is a multi-resolution icon Windows displays the appropriate image. If your icon contains only a 16X16 graphic it might not look too good when resized to 32x32. Here's what a multi-resolution icon (mine) looks like compared to one resized by Windows (MSN's):

Link the Icon with Your Web Pages

There are two ways to associate your pages with your Favicon, depending on whether or not you have your own domain...

If Your Web Site Has Its Own Domain

If you have a .com or .co.uk (or whatever) address you can use this method. When Internet Explorer bookmarks a page it looks inside the root folder of the domain to see if there is a file called favicon.ico. If it finds one it uses it. My web site has its own domain (www.fontstuff.com) and that is where my favicon.ico file is located. In fact, you can display just the icon file in the browser by following the link to www.fontstuff.com/favicon.ico. No additional programming is necessary unless...

If you don't have your own domain (i.e. your web site is located in your personal web space provided by your service provider) or you want to use different Favicons for different parts of your site you should use the next method.

If Your Web Site Does Not Have a Domain

If this is the case you need to place a short line of code in the <head> section of the HTML code of each of your pages (or at least the home page and any others that you think your visitors might want to bookmark). The code simply tells the browser where to find the icon file. Unlike the previous method the file does not have to be called favicon.ico because this time you are telling the browser exactly which file to look for. The code should look something like this (remember to specify the exact path to the icon file):

<link rel="shortcut icon" href="images/myicon.ico">

The code can go anywhere after the <head> tag and before the </head> tag.

Testing Your Favicon

After uploading your Favicon file and any modified pages you will want to check it out so don't be disappointed if it doesn't appear in the address bar straight away! It's main purpose is to be a shortcut icon. Right-click on your page and choose Create Shortcut to place a shortcut, displaying your new Favicon, on your desktop. Alternatively, open the Favorites menu and choose Add to Favorites to see your new icon displayed in the Favorites menu.

To prompt it to appear in the Address bar, point to the regular page icon in the Address bar and drag it a little way on to the page then let go. This prompts the page to reload. You might need to do it a couple of times before your icon appears. Don't think you or your visitors have to do this every time! It's just a way of displaying the icon on the first visit. On future visits it will display by itself. And, just because I like building animations...