How to Add Your Favicon to Blogger Update

Google/Blogger broke the instructions in the previous post about how to add your own favicon to a blogspot blog by adding some HTML that referenced the Blogger.com favicon instead. Fortunately the fix for this is relatively simple. Here is what has happened.

Blogger.com has added their own HTML to the templates near the top referencing their favicon. It looks like this if you look at the source code.

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

The instructions on How to Add Your Favicon to Blogger in step three says to add your own HTML code referencing your favicon right below the <head> tag. The web browser however will use the last reference so the Blogger.com favicon code was coming later on. The fix for this is to place your favicon code just before the closing <head> tag that looks like this: </head>.

Your code referencing your custom favicon then overrides the Google/Blogger.com code for the favicon and your custom favicon will return.

I tested this on the Free Favicon Blogspot blog and the favicon has returned. Give it a try on your Blogspot blog and let me know if it works.

26 thoughts on “How to Add Your Favicon to Blogger Update

  1. Hurray, it works! Thanks so much for the advice! I ended up having to copy your exact code from the previous how to and then paste my image location over yours for it to work, but it works :)

  2. cant get it to work for me
    i keep getting a 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: The value of attribute “href” associated with an element type “null” must not contain the ‘<’ character.

  3. @blackzero85 Use a png or gif as the favicon and you can host it on Blogspot. Just upload it to a post and copy the URL for the link tag. If you don’t like that idea you could use a Flickr account, or Google Page Maker account or a free image host I suppose. A free image host could/will delete it probably at some point. I would just use Blogspot though that way it is all there.

  4. @brad Sorry to hear you are having problems. Make sure you are viewing the HTML code. I have not run into that problem and I was not able to repeat that problem on my test blog. My best guess is that you are not in the Edit HTML mode for your template.

  5. I followed the instructions, and it is working using FireFox. However in IE, it does not. ANy tips? please email me the answer. Thanks.

  6. same error here in Blogspot. IE7.0. Yep, my HTML is spotless, went over it with a magnifying glass – even thought about the common error of which program generates the ” ” (some are recognized, some aren’t). No go. Same error code as above. I hope there’s a workaround! Waiting for it to show on my personal home page, too. Thank you for the code!

  7. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The value of attribute “href” associated with an element type “null” must not contain the ‘<‘ character. I get this message. I am in Edit Template HTML mode. Weird.

  8. hi Free Favicon, it works but it won’t show up in my bookmarks section like other favicons do. Do you know why this is and tell me how to fix it?

  9. Ryan – to fix your problem – put a / at the end of the line – just before the > – so that the line finishes.. />

    That’ll work for you.

    All the best

    Keith Eckstein

Leave a Comment