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.
November 22nd, 2008 at 10:50 am
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 :)
November 24th, 2008 at 1:07 am
Glad it works for you!
November 29th, 2008 at 8:44 pm
Where can I host the image? I have blogspot account, FYI. I want to change my goddamn useless favicon… -_-
November 29th, 2008 at 8:44 pm
Btw, I’ll stumble this for you if this method works. :)
December 5th, 2008 at 3:30 pm
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.
December 14th, 2008 at 10:56 pm
@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.
December 14th, 2008 at 10:59 pm
@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.
February 3rd, 2009 at 10:48 pm
I would love to try this but none of my Blogger blogs show a closing:
February 3rd, 2009 at 10:53 pm
Okay, I found it wayyyyyyy down the page. Thanks so much!
February 3rd, 2009 at 11:04 pm
@Ashley No problem glad it worked.
February 23rd, 2009 at 6:26 pm
Works for me!!!
March 14th, 2009 at 2:29 pm
I followed the instructions, and it is working using FireFox. However in IE, it does not. ANy tips? please email me the answer. Thanks.
March 15th, 2009 at 4:41 pm
I would need to see your site?
March 22nd, 2009 at 1:42 am
I’m trying this in IE7 and it doesn’t seem to be working. Did you find a solution for Andy?
March 26th, 2009 at 4:28 pm
thanks for sharing the tutorial! i’ve linked back to you on my blog here: http://akikowolf.blogspot.com
March 28th, 2009 at 3:07 pm
Sorry been a little busy with other things and have not had much of a chance to look.
May 23rd, 2009 at 8:24 am
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!
May 23rd, 2009 at 3:37 pm
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.
July 4th, 2009 at 5:19 pm
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?
August 20th, 2009 at 5:04 am
For ready made favicons, I have set up a little site that allows free hosting/linking – http://www.favicons4free.com
Hope this helps
Keith
August 20th, 2009 at 5:05 am
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
September 19th, 2009 at 4:36 pm
as u can seee,it didn’t work for me too. I tried what u wrote step by step, but still. no. can u help me, pleaseeeee :/
September 22nd, 2009 at 4:44 am
nice generator sir
January 17th, 2010 at 8:07 am
You Rock!! THanks for this.
February 25th, 2010 at 3:22 pm
Thanks for this – I had trouble getting it to work but was missing the > at the end of the code. It worked perfectly once added this – nice one!
May 29th, 2010 at 9:20 am
it’s very nice icon set’s. subscribe to rss.. thank u..;)