Hey Readers!

A favicon (acronym for favorite icon), is a file that is associated with a particular website and contains many icons. Browsers supporting favicons display the page's favicon in the address bar of the webpage or in a list of bookmarks. It is known by many names such as shortcut icon, website icon, tab icon, URL icon etc.

A favicon must have following 3 characteristics:

• Name
• Size
• Color

A favicon is a graphic icon.

It is like a small logo that is put in front of the URL (visited). It is used to promote a trademark.

Now, how to add a favicon to your Web site?

For this, you'll need an image and a method that'll be used for specifying that this image is to be used as a favicon. There is one more common method that I have illustrated below, with an explanation. Remember, both these ways apply only to HTML and XHTML.

However, the favicon must be 16x16 pixels or 32x32 pixels. The image must be of one of the format: PNG (a W3C standard), GIF, or ICO.

METHOD 1: Use of a rel attribute value

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

This will not be functional if the image is not uploaded and the icon location is changed. This location is the recommended root site.

Favicon is displayed by browsers like: Mozilla, Firefox, Opera, but not Internet Explorer.

METHOD 2: Putting the favicon at a predefined URI

The other method is a little complicated. In this method, you need to have a predefined URI that will be used for image identification. The predefined URI will be relative to the server root. It will be like: "/favicon". This method works successfully. Some browsers just work that way. This particular URI helps them look for favicons. However, there are various drawbacks of using this method. There are many users that have their web sites, though they do not have a domain name of their own. These users cannot write to the server root because specifying favicons becomes impossible using this method.

Example :

Happy Coding !