0 How to add Favicon to a Blog

        You may have seen small image appearing on the leftmost side of your browser's address bar when you browse, and it is differing from site to site. That tiny image is termed as Favicon which is the short form of Favorite Icon. Look at the screenshot of the Google’s webpage. Find Google’s Favicon here.

        Now look at your blog, Did you see a Favicon there? Every Blogspot blog, by default recieves a Favicon as shown below.

        In fact, this Favicon belongs to the Blogger, on which your blog is being hosted. As part of giving more unique and professional look and feel to your blog, you may need to add your own Favicon. Today almost every web site has this distinguishing feature- Favicon

        Did you ever notice my Favicon? At least now you may be noticing the tiny animated icon appearing on the address bar. This blog also is a Blogger or blogspot blog; even then I am having my own Favicon. How is this possible? I will explain you in details about “How to add my own Favicon to my blog?”

How to add custom Favicon to a Blogspot Blog?

        It is very easy to add a Favicon into self-hosted web pages or Blogs. But in the case of free hosts like Blogspot blogs or BLOGGER blogs the procedure will be a bit tricky as you have access only to the blog layout but no file upload features.

I will explain the entire procedure in easy steps, so that even a newbie can add a Favicon to blog very easily.

1. Upload your image File and get the URL

        Hope you have uploaded your image file to some web locations and you have its URL. Otherwise learn how to upload files for blogs hosted in blogspot or blogger domain

2. Edit the layout of Blogger

From the blogger Dash board-->Layout-->edit HTML
<title><data:blog.pageTitle/></title> Find this code in the edit HTML page (refer screenshot). Just below this code add the code snippet given below according to your picture format.

1.ico pictures

In the case of .ico picture formats you can use either of the code snippets. But former is preferred as its having more number of browser compatibility

<title><link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/></title>

<title><link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/></title>

2.png pictures

For adding .png picture format as your Favicon use the below given code snippet

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

3.gif pictures

For adding .gif picture format as your Favicon use the below given code snippet

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

On adding this script, please replace the 'URL of your icon file' with the correct URL of your Favicon.
Once you have this script ready, save the template and check your blog, your Favicon should be loading fine. When you refresh your blog site, you should see your nice little Favicon just before the blog address.