Favicon is a small icon shown next to site URL in the address bar. In Blogger, by default orange colored blogger icon is shown as favicon. You can make your blog stand out by using your own customized icon. Before you implement the code, you can grab or make your own favicons: Make Favicons – Browse Favicons
Use Favicon feature in ‘Blogger in Draft’ [New method]
Blogger has now officially launched feature that allows you to add favicon image with simple browse, select and upload routine. Here are simple steps to get going:
1. Open blogger in draft (http://draft.blogger.com) and login into your Blogger account.
2. Then goto Dashboard > Design option. Look for Favicon option on the Page Elements tab (or from the Layout tab if you are using the new user interface).
3. Then click Edit on the new “Favicon” setting above the navbar element. A new window will open, there you can select favicon image stored on your computer.
As of now this feature only support ico format files for favicons. If you want to use normal JPEG or GIF images as favicon in ico format, then use free image into ico tools for converting images into ICO icon format required for favicon images.
4. After you have selected favicon image, click Save button. Blogger will automatically resize and upload the selected favicon image to your blog.
Your new favicon should start appearing in some time. If the favicon on your Blogger blog does not update, make sure you clear all history from web browser and then check for it. [via Blogger Blog]
Manual method to add Favicon to Blogger blog
To get started, first you need to backup your Blogger template: Click on ‘Layout’ > ‘Edit HTML’ and then click on ‘download full template’ to save it on your computer. Now perform following steps to a change favicon in your Blogger blog:
1. Click on ‘Layout’ > ‘Edit HTML’
2. Then add following code after <head>
<link href=’http://www.URL.com/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://www.URL.com/favicon.ico’ rel=’icon’/>
Above http://www.URL.com is the web address or location where your favicon is stored (hosted). You can upload favicon to Googlepages (now Closed) or on any free image hosting websites that support favicons upload.
‘favicon.ico’ is the name of your favicon file. You can use any name like myfavicon.ico and so on. After adding above code, update the http://www.URL.com and favicon.ico in the code. Then click on save template button. Open your blog and your new favicon should be visible in the address bar. [Originally published on Aug 14, 2008 – Updated on June 10, 2011]
I changed my favicon but it didnt change how much time it will take to change the favicon
Nice post dude !! But is little bit difficult as it needs .ico image.
You can easily change favicon with any type of image file.
careplex.blogspot.com/2013/01/how-can-i-change-favicon-in-blogger_29.html
If you don’t like the new interface – like me – you can just edit the HTML.
Make your 16×16 pic, change it to the “.ico” format and rename it “faviconbyme.ico”.
Upload it to the “images” folder on your ordinary website server.
This images folder should be in /public_html/ – the usual place.
Sign into the Blogger Dashboard and choose “Template”.
Put the following code above “”.
Save it and now you have a pretty little icon for users who want to follow your blog. Users will put your blog URL in their “Bookmarks”.
thx for the useful infos. one question. i noticed that this method works in firefox. how to make it work in chrome?
thanks im using the same method as u suggested..automated method..
thank you
nice post! more awesome tricks you need on blogging http://www.modifymypc.blogspot.com
HELP! I keep getting this
This file is too large. You can upload files up to 10 KB in size.
I did this one and I still have the Blogger button!
i want to change my blog favicon at undefined interactivemarketingsolution.blogspot.com
but its coming through technically,plz advise how to change this while i have tried below code
plz help me to to find out it solution….
Yupiee it works :) :)
Hi. You said it worked, but in my html, I don’t see where it says ,head. so can you tell me like what its under or something?
blogger has released the official favicon customization, check this post: bit.ly/m4iVx2
Thanks for heads up, article updated!
you are welcome!
this is not working man,,,
This one worked for me:
http://www.tothepc.com/archives/how-to-add-or-change-favicon-in-blogger-blog/
Nice trick i have done it
doesnt work man
Thanks man…I applied the above on my blogs, it really works.. Thanks
this link might be useful, dioisme.blogspot.com/2010/12/changing-your-blogger-blogspot-or-other.html
this tutorial here also gives the proper and completed method of changing blog favicon. even starting from making the .ico file itself
dioisme.blogspot.com/2010/12/changing-your-blogger-blogspot-or-other.html
Not working! :(
You can upload a favicon to a blogger blog there is no root directory this will only work on a website hosted on a webserver. And you still require the HTML code.
Going to apply this trick right now..Thanks for this nice post.
Thanks Friend.I Replaced My blog’s fevi icon and its looks so good.See it:www.a2ztips.co.cc
Error occurred friend
Here is another way of changing tech-tak-talk.co.cc/2010/04/favicon-generator-for-blogger-blog.html Favicon for blogger
buddy the code is not working it gives the following error
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.
Maravish95 and SHane
Just delete the ‘ sign in the code and retype them in their original place. Then try to save again. I think ur problem will be solved.
Thnx
Salaaam. if this hack is not working for some of you guys. search for instead of and paste below it. and change the that favicon.ico to your favicon url.
hopw this will solve some of your problem. :)
look it doesntt work at all it says this
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.
works very well for me. thanks for posting this. really helpful.
It worked on firefox, but not on IE 8?
I am not a programmer and when I tried this on Blogger, I got
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.
Any ideas?
It will work now.. the quotes used are not recognized by blogger
nice post, I get icons to create favicon at http://freeicon7.net
a simple Tool for favicon is http://www.favinator.de simple image upload, create animeted favicons
@Kanak
Unlike wordpress.com & Blogger blogs, this is only possible in self hosted WordPress blogs.
I have also noticed that even if you dont add code , but just keep the favicon.ico file in root directory .. it works… I mean it automatically gets picked up as your blog’s favicon.