How to add FAVICON to your html website

hi, how are you all

Adding FAVICON to your website is much easier than you think.
It's just a matter of a line of 20-30 alphabets placed at right position in your index file.

Today I am here to cover an important topic of  FAVICON.
Actually few days back I got some mails regarding the same from many students who are learning html and designing their projects, that how to add 'FAVICON' specially to html websites.

It's very easy to add favicon to blogger or to wordpress. To add favicon to html sites is also easy.

Before moving let's have a look to the term which we are going to work on.

What is FAVICON ?

A Favicon, also known by many names such as

• Shortcut icon 
• Website icon 
• Tab icon
• Bookmark icon. 

It's a icon with 16 X 16 pixels dimension associated with a particular website and  is always same for all pages of single website. Basically it is a small image but as images have extension like .png, .gif, .jpeg, favicon is a image with an extension ".ico".

So the small image which pop up on the browser tab with name of website is basically a Favicon as shown in image.

How To Add Favicon To Website ?

There are only two steps to add favicon to html website.

1. To covert the image into ".ico" image.
2. Add a simple html code to header of the website.

• To convert image into ".ico" image :-

So first of all we have to convert the image that we want to set as favicon to ".ico" extension with 16X16 pixel dimension. No need to worry about it is also very simple and hardly takes a minute( depends on net speed).

1. Open the favicon.cc.
2. 
3. Import the image that you want to set as favicon to your website.
   
4. Choose the image and upload. Once you click on upload, at back-end image will automatically convert to .ico entension 16x16 pxl. 
   
5. Download the new .ico image and it will be downloaded with name "favicon.ico".
   
6. So after downloading the image "favicon.ico" remember one thing, please do not change the name of the image else server will not read it. Now copy this file and upload it to the main folder (root folder) of your website with the "index.html" file on your server.

• Add a simple html code to header of website :-

Now after uploading the "favicon.ico" to the root folder of your website on server, one thing remains and that is to read that image on server. So here is the code line:-

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

Paste this code as it is to the header of the index.html page of your website and upload it to server and just refresh the page once again and all done.


So now adding favicon to your html site is so easy like to add the same to blogger or to wordpress.

Hope you all like this post and I wish this proves useful to you.

Thanks :)