A favicon is a small image placed in the web site root directory. It is 16×16 pixels in dimensions (a very small image) and usually acts as a web site identifier if it contains the logo, a part of the logo or the web site colors. It has its own extension, .ico and is named favicon.ico.
The favicon image is stored along the web site URL in the Favorites or Bookmarks folder. The latest versions of Netscape (7.0) and Mozilla web browsers also display the favicon in front of the URL in the location field and on Tabs.
Sponsored Links
Refer image below:
If you are using the correct browser version, you would be able to see a favicon of the logo; quite like the image on the left. By the by, the word favicon stands for favorite icon.
Where is a Favicon used?
A Favicon (if the web site has one) is stored along with the web site URL when a visitor adds it to the Favorites or Bookmarks folder. It is also displayed before of the URL at the Location Bar in the latest versions of Mozilla and Netscape browsers. These browsers [List of browsers] also show the favicon in the Tab that displays the web page. Refer image below:
This small favicon image helps in identifying a web site especially if it carries the web site colors and a part (or the whole) of the logo.
Why should you have a Favicon for your web site?
Since the Favicon is stored in the Favorites or Bookmarks folder it quickly helps tagging a web site. Web surfers have tons of sites stored in these folders and they would be able to spot your site quickly if the favicon carries (even in part) the web site logo and the web site colors. The favicon can, thus, be employed to extend the web site brand recall value.
Whenever visitors add your web site to the Favorites or Bookmarks folder, the browser connects to the server and tries to retrieve the favicon file from the server root or as indicated in the HTML of the web page. How does a browser know which image is a favicon? Simple, a web site favicon is stored as favicon.ico file. Note: the .ico is a special image format; renaming a .gif file will not convert it to a .ico file.
A check of your web site’s statistics would reveal 404 (File Not Found) errors with the culprit being the missing favicon.ico file. This 404 Page Not Found Error [List of HTTP Codes] will be generated for a favicon whenever a browser attempts to get it from the server (whether to display it along side the URL or store it in the Favorites folder). If you don’t want to see the 404 error messages for favicons, simply create a favicon for the site and upload it to the server root (the directory that has the index.html or equivalent file).
Hallmarks of a good Favicon
Though it would be ideal that a favicon contains the complete logo of the web site it is almost never possible. This is because the favicon is a very small image, 16×16 pixels in dimension. Resizing the logo of your web site would turn it to an unrecognisable blur!
So how can a favicon be used to identify a web site? There are actually several ways in which you can design a decent favicon for your web site.
A simple favicon can be used to describe the nature of the web site. In such cases, known and familiar graphical symbols can be used. For example, if your web site sells car parts, you can have a favicon of a car image. Similarly, for a biotechnology web site, a double stranded image of DNA can be used as a favicon.
More customized favicons can be created using web site colors. For example, you can create a simple looking favicon and still make it function as a web site flag if it contains the predominant colors used on your web site.
The best favicons, in my opinion, are those that carry a part of the web site logo and also have the predominant color/s of the web site. It is very difficult to put the entire logo in a favicon because the latter is so small. Hence, you should generally pick up the first letter of the logo (in the same font and style) or any graphical image, icon or element that you use in the logo.
