Tutorial: Using Favicon and its Importance

I know most of you already know what a Favicon is and how to use it. But some of you do not know anything about it or do not use it even if you know about it. Many do not know its importance. Even if you are an expert read this article because I am not, but I know about Favicons.

First of all what is Favicon?

A Favicon (short for "favorites icon"), also known as a page icon or an urlicon, is an icon associated with a particular website or webpage. Now every thing cannot be understood by words so just see the screen shot below.

Now the small picture just left to the website URL is the Favicon.

Why is it Important?

It puts good first impression on your visitors. People have tendency to remember a beautiful picture for a longer time than good written materials. Now if you visit my website after many days then you will recognise my blog by my Favicon (If you forget the title).

How do you get one for yourself?

You can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons will display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface. Favicons are mostly .ico files (a format of image) and are 16X16 in size. You can resize some bigger picture to 16X16 sizes and use it as a Favicon. You can create your Favicon online as well. Visit Favicon.cc . Need good software to make Favicon, use Irfan View. Remember you can also use .jpg, .bmp, .png and .gif as Favicon.

Now you have created a Favicon, how to put it on your website?

There are two simple ways to do. First if you have a web hosting plan on which the website is hosted, you just have to upload a Favicon file to the main directory. The file should be named favicon.ico and the final URL address of the icon should be http://websiteurl/favicon.ico. Second if you do not have permission to upload files to the main directory or you are hosted on others platform (Blogger blogs on blogspot and Wordpress.com blogs), than you have to use the following code in your web template. You just have to put the code below in the head section.

"< href="image URL" rel="shortcut icon" type="image/vnd.microsoft.icon">"

Replace ‘image URL’ by the URL of the image you are going to use as Favicon. It can be .ico, .jpg, .bmp, .png and .gif file.

So now you are an expert in the field of favicons. Below are some examples of Favicon. (Favicon links to the webiste )