How to add or Change Favicon in Blogger Blog?

ADVERTISEMENTS

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 FaviconsBrowse 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]

SHARE
 

Comments

  1. SAI MOHAN REDDY says:

    I changed my favicon but it didnt change how much time it will take to change the favicon

  2. 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

  3. 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”.

  4. thx for the useful infos. one question. i noticed that this method works in firefox. how to make it work in chrome?

  5. thanks im using the same method as u suggested..automated method..
    thank you

  6. nice post! more awesome tricks you need on blogging http://www.modifymypc.blogspot.com

  7. brittanyxoxo98 says:

    HELP! I keep getting this
    This file is too large. You can upload files up to 10 KB in size.

  8. brittanyxoxo98 says:

    I did this one and I still have the Blogger button!

  9. 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….

  10. bhushan shah says:

    Yupiee it works :) :)

  11. blogger has released the official favicon customization, check this post: bit.ly/m4iVx2

  12. this is not working man,,,

  13. Nice trick i have done it

  14. doesnt work man

  15. Thanks man…I applied the above on my blogs, it really works.. Thanks

  16. this link might be useful, dioisme.blogspot.com/2010/12/changing-your-blogger-blogspot-or-other.html

  17. 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

  18. Not working! :(

  19. 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.

  20. Going to apply this trick right now..Thanks for this nice post.

  21. Thanks Friend.I Replaced My blog’s fevi icon and its looks so good.See it:www.a2ztips.co.cc

  22. Error occurred friend

  23. Here is another way of changing tech-tak-talk.co.cc/2010/04/favicon-generator-for-blogger-blog.html Favicon for blogger

  24. http://www.googlehacker.tk/ says:

    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”.

  25. 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

  26. 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. :)

  27. 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”.

  28. works very well for me. thanks for posting this. really helpful.

  29. It worked on firefox, but not on IE 8?

  30. 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?

  31. nice post, I get icons to create favicon at http://freeicon7.net

  32. a simple Tool for favicon is http://www.favinator.de simple image upload, create animeted favicons

  33. @Kanak

    Unlike wordpress.com & Blogger blogs, this is only possible in self hosted WordPress blogs.

  34. 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.

Add a Comment

*