Adding a favorites icon to your site (Favicon)

Have you ever added a site to your favorites menu in modern browsers such as IE and Firefox, and noticed that a web site's own custom icon was added beside the site's title in your list? Rather than the plain default icon, this custom icon makes the site stand out from the others in the list. Now, which site are you most likely to click on when you view that list again? Probably the one with the special icon!

If you haven't seen one yet, you can take a look by going to sites such as Dynamicdrive.com or Pageresource.com, and adding them to your favorites list. Notice how a colored icon suddenly appears in the favorites menu, and how the icon is also added to your "Address" area where you type in a web site URL.

So, how can you do the same thing? All that is actually required is that you create a file called favicon.ico and place it in your main website directory where the other HTML files are stored. The trick is in the creation of the icon file.

First, you will probably want to get an icon creation tool to create your own favorites icon. One good one is Microangelo. Or even easier yet, there's an cool online tool that lets you upload any image, and it resizes and converts it to a favicon: Favicon generator.

When creating a Favicon, you should be aware of the following guidelines:

i) Make sure the size of your icon is 16x16 pixels. This is the size the browser will expect.
ii) Make sure you use only a 16 color palette. Again, it needs to be this way to work properly.

After you've created a neat favicon, it's time to add it to your site. To do so, follow the below simple procedure:

1. Upload the generated file ("favicon.ico") to your site. Verify it's there by typing http://mysite.com/favicon.ico in the browser's location, where "mysite.com" is your site's address.
2. Next, insert the below code in the HEAD section of your pages, at the very least, your site's main index page:

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

That's it! Note that your favicon may not appear immediately after you've completed the above two steps. In fact, it may take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug.