Bookmarking And Favicons

Anand Ramchandran
With the number of websites on the net growing by leaps and bounds, it is increasingly difficult for a visitor to remember your website's URL. This is where bookmarking and "Favicons" come in.

Most Internet browsers have ways of adding bookmarks or favorite pages, so that the user can go directly to the website without needing to remember or type the URL. Making this process easier is the use of automated scripts that allow the surfer to bookmark your page with a single click.

This shouldn't be confused with scripting that causes a bookmark to be placed without user intervention.

Shown below is a very simple script for adding a bookmarking link to your webpage, allowing visitors to easily add your page to their favorites list:


This is how it should look on your page:

If you study your server logs or stats, you will find a number of not found errors for favicon.ico. When a visitor bookmarks your webpage, IE5 and above looks for a custom icon called favicon.ico, and if not found, uses the default IE icon for bookmarking your URL.

If you bookmarked this page, you'll see the difference between using a custom favicon.ico and the default IE icon. Make a good favicon.ico and you'll be amazed at the number of repeat visitors you'll get. It's a form of branding, which forces your website into the consciousness of the web surfer, while making your bookmark stand out from the rest.

The actual size of a favicon file is 16 x 16 pixels. Let's assume that you have a custom logo which you use on your website. Open this logo in your photo editing tool and reduce the size to 16 x 16. Note that reducing it such a small size can drastically reduce the quality of your favicon. I suggest a bit of experimentation, and if necessary, recommend that you build one from scratch. Once you have it ready as a jpeg file, you have to convert it into an .ico file using an icon editor such as IconForge. Set the size to 16 x 16 and colors to 256 in IconForge. Name the file as favicon.ico.

Now comes the question of using the favicon.ico file. All you have to do is upload it to your web root, like so - In case of any problems accessing this file from other pages, such as secure (HTTPS) pages, use the following code within your <HEAD> tag, and be sure to change "" to your own URL:


You can find more information regarding favicons at