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.

favicon 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?

Updated:
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..
Ex:

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


Next, Skip the below part and go to Next step..

{SKIP THIS PART- ITS OLD} {start}


All you need is a program to create a favicon in (.ico) format.If you haven’t a program to create in .ico format,No Problem….you can also use png or gif format.If you have Photoshop, or any other programs like that,open it and create a 16*16 image and save it as .png or gif format [look at the below screenshot below] or there are so many online sites which can create a favicon for you,just search by typing’ free online 16*16 icon generator’ in google.They ask you to upload a picture from your desktop,and they convert it into 16*16 .ico file.

save the image in png format So,Now your icon is ready…You are just a few steps away from creating a beautiful favicon for your site…

Now,go to Google Page Creator
and upload your icon file by clicking on the upload link(look at right side) and browse the file and note down the url of the file by clicking on the file.[see the screenshots below]


note down the url

{SKIP THIS PART- ITS OLD} {end}

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.(like http://howshealth.com/favicons/bt.ico)
That’s it! Now you can see a beautiful favicon in your blog.

Originally posted on June 8, 2011 @ 10:58 pm

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.