Adding a favicon to the blogger(blogspot) blog:

Knowledge is good only if it is shared, I have learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, As I make the changes or learn something new, I shall document them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me. im not changing my icon because i like to percent as blogger, it's ups to you do or not, but i know you will like this very much.

Adding a favicon to the blogger(blogspot) blog:

For those who don't know what Favicon is 'Favicon is a small icon(image) displayed at the beginning of the address bar of the browser.It is also called Favourite Icon,Pageicon and urlicon.

The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites.


Most of the people use 16*16 pixel favicon(you can also use 32*32 pixel favicon) with ".ico" format.But,you can also use gif,png(image formats) aswell.

So,ready to create a favicon?
I created a Free Favicon generator tool which will save lot of your time. Just go to this page and upload any image file (JPG or GIF or PNG or BTM) and it will automatically convert it to icon file and you can save it to your desktop.
Next, you need to upload it to some host. There are lot of free hosts available to host .ico files and with hotlinking enabled.. Just do a quick google search.
Once you upload it to some host. you get a direct url to the favicon file.




http://howshealth.com/favicons/bt.ico




Now,go to your blogger dashboard>layout>Edit html[look at the below screenshots]


and look for this code(it is at the top the template)




<title><data:blog.pagetitle/></title>




and add the below code just after the above one[as shown in the below screenshot




<link href='ICON FILE URL' rel='shortcut icon'/>
<link href='ICON FILE URL' rel='icon'/>

and replace the 'ICON FILE URL' with the url of your icon file.(likehttp://havelockknights.blogspot.com/bt.ico)

That's it! Now you can see a beautiful favicon in your blog.

Fee free to add the comments...