How to add or Change Favicon in Blogger Blog?

 Filed As:Blogger, Tips
 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

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!



By Davinder on Thursday, August 14th, 2008

Share & Spread: Digg | Delicious | Share |
Loading



▼ Comments

12 Responses to “How to add or Change Favicon in Blogger Blog?”
  1. Anindya says:

    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

  2. Imaadh Bin Nasir says:

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

  3. Maravish95 says:

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

  4. carlofina says:

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

  5. Shalini says:

    It worked on firefox, but not on IE 8?

  6. SHane says:

    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?

  7. helen says:

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

  8. MCDavid says:

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

  9. Davinder says:

    @Kanak

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

  10. Kanak Bhandari says:

    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

Have your say, add a comment using following comment form. If you want an image to show with your comment, go get a gravatar!