The favicon, or shortcut icon, is the tiny picture that appears next to a site's url in your browser's address bar. It also appears next to the site's name in your Bookmarks or Favorites list, and if you are using a tabbed browser it may show up on the tab as well.

Posting a favicon to your site is a nice way to add a bit of personality, and it's actually quite easy. The most difficult part of the process is choosing an image to begin with! If you have a good eye for graphics, you might design your own. If not, you can always pick an image from the web. If you decide to use an existing image, do NOT simply download a graphic from another site and post it to your own – you'd be infringing on that webmaster's copyright and could end up in serious trouble. Instead, grab an image from one of the free sources on the Internet.

Your favicon must be a specific size to work – either 16X16 pixels or 32X32 pixels. This is really tiny, so when you select your base image be sure it’s one that will look all right shrunk down to postage-stamp size. Bright colors and simple shapes usually work best. You must also save your image in one of the accepted favicon formats: .png, .gif or .ico. Most web developers use .ico because your favicon will likely be the only file on your website with that extension, so it will stand out when you skim through your site’s directories.

You can use one of a number of free web tools to convert your image to a correctly sized .ico file. I use one offered by the makers of HTML Kit, which allows you to create both static and animated favicons. There's a link to the favicon tool below this article.

Now comes the easy part – adding the favicon to your site! You have two options for displaying the favicon image. The first and most secure option is to put the following code in the head section of every page where you want the favicon displayed, replacing the 'href' portion with the url of your favicon:

<link rel="icon"
type="image/ico"
href="http://example.com/myicon.ico">

The second option is to name your favicon "favicon.ico" and place it in your root directory (this is usually the same directory as your homepage). With this method you don’t even need to add code to your webpages, and nearly all browsers will pick up the icon – however, certain browsers (usually older ones) will not display the favicon if you use this method.