How to Add Your Favicon to Blogger

Update: Blogger has improved and these instructions are no longer needed.

** Please see our new post on how to add your favicon to Blogger blogs. **

Blogger.com is one of the most popular blogging platforms on the Internet, yet if you have a blog with them you are often stuck with the default Blogger.com favicon. Hard to brand your blog with your own personal touch when you have the Blogger.com favicon on the address bar. If people bookmark your blog they won’t see your favicon and might quickly forget about your website. There is no reason why you can’t change the favicon on your Blogger.com blog to one of your own design. You just need to follow these easy steps and soon your Blogger.com blog will sport your great new custom made favicon.

  1. First thing you need to do is create your own custom made favicon. In this case you do not have to use an image to favicon generator, but your image should be either a .gif or a .png. In you example we are going to use a .png file. If you are not sure what kind of image to use browse through some of the free favicons that we offer, perhaps there will be one there that you would like to use. If you do decide to use one of the many favicons we have to offer don’t click “Download this favicon” because that will give you a file in the Windows .ico format. Instead right click on the image of the and choose “Save Picture As”.
  2. After you have the image you would like to use as your favicon, goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Once you have created a new post use the image upload button to upload your favicon to your Blogger.com blog.

    Once you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode. Once you are looking at the HTML you will see something like this:
    <img src="http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png" alt="" id="BLOGGER_PHOTO_ID_5212704798569567682" border="0" />. You need to highlight and copy the part in quotes right after src. In this case it would be: http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png. You should paste it into Notepad or another text editor. You don’t want to lose this and you will be closing the Blogger.com editing window next.
  3. Once you have the location of the image you uploaded copied, you can click on the Layout tab of your Blogger.com blog. Once you are at the Layout, you need to click “Edit HTML” Look in the HTML for a tag that says <head> </head> and right below above it paste: <link href=” rel=’shortcut icon’/>
    <link href=” rel=’icon’ type=’image/png’/>
    Once you have those lines pasted into the template, copy the src of the image you want to use as you favicon that you uploaded earlier and paste it into the two lines you just added where the href=” is. In our case it looks like this: <link href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png' rel='shortcut icon'/>
    <link href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png' rel='icon' type='image/png'/>

    Click save template and your Blogger.com should now have your fancy new custom favicon showing on the address bar when you visit your blog.

If you want to see how we did it take a look at our Blogger.com Free Favicon blog where we added our great favicon.

You can use other free hosting services to host your custom favicon, but you don’t want to use an image hosting service that deletes images after so many days. Using Blogger.com to host the images works well, but you could also use Google Page Creator, or even your Flickr account.

Have fun adding your custom favicon to your Blogger.com blog!

Update: It appears that Internet Explorer is being difficult and might need you to use a .ico file. Check this post for more information. Blogger.com Favicon’s in Internet Explorer

Be Sociable, Share!

98 Responses to “How to Add Your Favicon to Blogger”

  1. Shelly Says:

    Okay, I just followed your instructions, step by step and all I have now is the Internet Explorer “e” as my favicon. So I thought I’d check out the link you listed on blogger and it had the same thing. Is it something I did or didn’t do? Or is it merely internet explorer that does that? I’d appreciate any insight you have. I am working on writing a book and have set up my blogspot for friends and associates to keep track of the progress. Thanks so much!

    Shelly

  2. Free Favicon Says:

    You might have to clear your cache to get Internet Explorer to actually go and get the new favicon. I checked the link you left and I see pink lips as the favicon. Try refreshing the page while holding down the shift key and see if Internet Explorer will get the new favicon.

  3. Geheim Plan Says:

    maybe worth to mention that your uploaded PNG picture should be named “favicon.png” and not different….

  4. Free Favicon Says:

    Good point. The file actually be named something different but it keeps it simple if it is named favicon.png.

  5. Mert Atilhan Says:

    Thanks for the tips. Straight forward. Thanks a lot…

  6. baa Says:

    i thought it was only possible to make favicons using the «.ico» format.

    so i’ve learn 2 things today thanks to u.

  7. Sunfish Says:

    I have followed your step by step instructions as well with the same result being the internet explorer favicon appearing evan after refreshing my cache several times. I am not sure what else to do, but I would really like to put my favicon on my blog site. Any suggestions?

  8. aditoke Says:

    today all my blogger blogs can not show my own favicon.. could someone help with this? thanks…

  9. Joshua Stoned Says:

    Google/Blogger broke this somehow. Check your example blog. In firefox on mac and pc your custom favicon no longer shows up, as none do on blogger.

  10. arabek Says:

    I followed all your advises but i still have a problem with the favicon on my blog. Could you help me?

  11. Mike Newman Says:

    It’s not working for me. I was able to follow step by step and nothing. I still have the blogger icon.

  12. JimTexas Says:

    I’m not getting this to work for my blog. Is there a time delay involved? Anything look funny in my template?

  13. Amy Says:

    Hi,
    I followed the instructions and all I get is an “e”. Clear my cache and even checked on another computer. Any help would really be appreciated. Thanks–Amy

  14. Louden Says:

    I followed your instructions and they work. Awesome.. Thanks for your info.. Much appreciated.

  15. Free Favicon Says:

    Hello Everyone! Google has decided to break these instructions. I am trying to find a new way of adding a favicon to a Blogspot blog. Stay tuned.

  16. Free Favicon Says:

    Updated the tutorial to reflect the changes the Google/Blogger.com did to break it. Hopefully it will help people get their custom favicons working on their Blogspot blogs again.

    Sorry about the delay in fixing it.

  17. Jeff Says:

    Thanks so much for your tutorial on adding the favicon to Blogger! I was having troubles at first with the stynax, but once I copied you’re example code and replaced your icon URL with my own, it worked like a dream! Keep up the awesomeness!

  18. Free Favicon Says:

    @Jeff No problem. Glad it worked for you! Nice favicon by the way.

  19. Jeannie Says:

    I did everything, and over and over again.. I have my code before the and the favicon.png all that is done correctly and even re did everything a few times.. I can not get it to work.. this is day 3 and still not working.

  20. Free Favicon Says:

    Jeannie, Sorry it is causing problems. Maybe try it as a .gif file and see if that helps.

  21. Free Favicon Says:

    Jeannie, Looks like you got it working. Great! Nice favicon.

  22. mummyslove Says:

    Thanks mine seems successful!!! ^_^v

  23. Free Favicon Says:

    @mummyslove Good to hear. Glad it worked for you!

  24. Shafar Says:

    Thanks! It worked for me!!!

  25. Meena Mondal Says:

    Thank-you so much! Your steps worked for my blog. :)

  26. Paivi Says:

    It took me couple of days to get this work. Luckily I finally found your page. Thank you!
    I had some problems though: When I pasted the link to Blogger, it changed these =’ to these =’. And it was all it needed to fail. If you have the same problem, check this too.

  27. Free Favicon Says:

    Thanks for the additonal information. I will have to take a look and see if that happens to me.

  28. Frostylittle Says:

    hey i have a question! I followed all theese steps on blogger but when i finally finished it said 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: Element type “link” must be followed by either attribute specifications, “>” or “/>”.Help!

  29. Free Favicon Says:

    That is odd. The tag is closed with a />. You could try adding a space so it looks more like this . If that does not work try this . Let me know how it goes.

  30. frostylittle Says:

    Free Favicon, I just started entire favicon steps over! But instead of getting a favicon on my blog,
    I got all the words I just added to my blog at the top o the page! Take a look for yourself by clicking on my name!

  31. Free Favicon Says:

    @frostylittle I don’t know what to tell you. I took a quick look but you must have taken it out by then. It does work, you can see on the Free Favicon test blog it is still working – http://freefavicon.blogspot.com/. All I can say is if you are having problems use the contact form to send me a note and we can arrange a time look at it.

  32. Lala Says:

    It works!!! THANK YOU!!!

  33. Andy Says:

    Hi. This is a great resource. Thank you! I followed your steps very closely and tried it a few times, but for some reason it’s not working. I am not able to save the template and get this message when I try to do that or to preview it:

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

    Is something wrong with what I entered?:
    ]]>

    Thanks!

  34. Tami Says:

    I’m having trouble getting this to work. Can you help?

  35. Free Favicon Says:

    It looks like it is working to me. Looks good.

  36. lori Says:

    i could kiss you’re feet!!! thank you for you’re help!!

  37. Free Favicon Says:

    Thanks glad it helped.

  38. Heidi Says:

    It isn’t working for me. The first time, I got that strange error about the blog not being well formed. So, I copied your text and replaced your favicon image with mine. That eliminated the error. Then I realized I was putting it about the instead of above the . Unfortunately, it didn’t work in either place. Any ideas?

  39. Heidi Says:

    Just looked at my comment, and some of it disappeared. I was putting the text above the “” text instead of above the “” text. Hopefully since I put it in quotes, it won’t disappear this time.

  40. Heidi Says:

    It disappeared again! I’ll take out the carrot marks. There are two spots that say “head” (surrounded by the carrots). One says “/head” and the other just “head.”

    Sorry to type so many comments. I don’t know why the code description keeps disappearing!

  41. Free Favicon Says:

    The code in the comments keeps disappearing because it is HTML and it is stripped so people can’t do a cross site scripting attack. As for your favicon problem the code is in the right place, but you need to add rel=’icon’ type=’image/png’ to the link tag and it should work.

  42. Heidi Says:

    Yeah! It worked. When I pasted my link on top of yours, I accidentally replaced too much code. Thanks so much!

  43. Heidi Says:

    Is the favicon supposed to show up on blog lists? I noticed on my friends’ blogs that my icon still comes up at the default B.

  44. Free Favicon Says:

    Blog lists? The code probably pulls the first favicon image it finds in the code and that is the Blogger B. I suppose you could add the favicon code twice, one at the top of the head and one at the bottom to see if the favicon changes on the blog list, but no guarantees. That is the price you pay for using a free blogging service like Blogger. If you want more control get your own domain, your own web host, and get away from Blogger. You will always be limited as to what you can do when you use a free service.

  45. Gyroscope352 Says:

    It is not working for me. My favicon disappeared very recently (within the week) and I have done exactly as you describe, but it is still not working. Has something changed recently?

  46. Free Favicon Says:

    Not that I am aware of but you never know with Blogger. I’ll take a look when I have a few minutes.

  47. gLf Says:

    Something is wrong, I don’t know why it doesn’t work…

  48. Free Favicon Says:

    It is working in Firefox. Looks like something has changed with IE and how it works. If I get a minute I will take a look and see. Maybe I’ll even try to fix the way this blog looks. It used to look right in IE but for some reason looks like crap now. Just another reason to hate Internet Explorer.

  49. Gyroscope352 Says:

    I’m on Firefox, and mine isn’t working.

  50. Andy Says:

    I use Firefox and I’ve tried several times since I posted on 2/23. It’s still not working for me either!

  51. Free Favicon Says:

    @Andy Your code is in the right place but you have the same problem that Heidi had.

    As for your favicon problem the code is in the right place, but you need to add rel=’icon’ type=’image/png’ to the link tag and it should work.

    It is not showing because all you have is:
    <link href='http://4.bp.blogspot.com/_4rH9UfBK9FE/SaMgYw7b1aI/AAAAAAAAAKM/hZvberNjnD4/s320/faviconPNG.png'/>

    It needs to be:
    &lt;link href='http://4.bp.blogspot.com/_4rH9UfBK9FE/SaMgYw7b1aI/AAAAAAAAAKM/hZvberNjnD4/s320/faviconPNG.png' rel='icon' type='image/png' /&gt;

    It might still not work in IE since it seems to be difficult lately.

  52. Andy Says:

    Thanks for the update. I finally got it to work. This is what I had to do: rearrange that rel…png’ bit to before the link (otherwise it didn’t work) and then when I updated it, Blogspot rearranged it to be after.

    Thanks!

  53. G0zen Says:

    hie…

    i’ve tried your steps above… i add the code mentioned above in my blog and successfully saved it. H/ever, now the Blogger logo is gone, plus my logo is not showing either.

    Can u please guide me further. TQ 4 yr respond.

    rgds,
    G0zen

  54. Free Favicon Says:

    Odds are it is because your code is not quite right. Your code looks like: rel='icon'type='image/PNG'. Try adding a space: rel='icon' type='image/PNG'. It might still not work in IE, but it should work in Firefox. IE seems to be broken lately.

  55. Blogger Favicon’s in Internet Explorer | Free Favicon - The Blog Says:

    [...] Comments Free Favicon on How to Add Your Favicon to BloggerFree Favicon on How to Add Your Favicon to Blogger UpdateG0zen on How to Add Your Favicon to [...]

  56. Free Favicon Says:

    The problem with the favicon not showing in Internet Explorer is a result of Internet Explorer not accepting a .png file as a favicon. See this page for a little more information. Blogger.com Favicon’s in Internet Explorer

  57. atkula Says:

    Thanks
    Its Work

  58. luizo Says:

    nice!!!
    it worked for me :) after so many hours but
    really really cool tip

  59. Heidi Says:

    Mine is working on my computer, and sporadically on my husband’s. We use Firefox, and my favicon is a png. I asked on my blog if my friends can see my favicon, and they all said no. Maybe they use internet explorer. Does that mean that I just need to switch my favicon to a jpg instead of a png?

  60. L.B. Says:

    For some reason or another I still can’t get it to work. I have my favicon hosted on an external public site, but it still doesn’t work. I’m using blogger on my own domain – does that affect it?

    Putting a favicon on my site should be a great finishing touch. Hope to hear from you.
    Thanks for the tutorial.

  61. Heidi Says:

    I switched it to a jpg, and my friends still can’t see it.

  62. leeling Says:

    wahaha .. it works finally.. thanks. ^^

  63. Free Favicon Says:

    @Heidi You will probably have to use a .ico file for Internet Explorer to display it properly.

  64. Heidi Says:

    I can make a .ico file, but those types of files won’t save to photobucket. Do you know a place that will accept .ico files?

  65. LEon Says:

    Thanks. It works for me!

  66. fairyhedgehog Says:

    Works perfectly for me in Firefox. Thank you!

  67. fairyhedgehog Says:

    PS to Heidi: I’m using Ripway to host my .ico image.

  68. Cotorra Films Says:

    Yeaaaaahhhh…. Got it to work finally….

    To everyone who has problems (like i did):
    1. upload your .png where ever you want to.
    2. locate in your html code. (You will find the right one almost at the end of the code)
    3. insert the following code like explained by FREE FAVICON:

    –> if it doesn’t work out and errors comes up, it is because of the ‘ in the code. Check out that they aren’t written that way: `

    4. replace the code http://favicon.png with your own code…..

    Thank you very much… had trouble before, but now it is working, at least in firefox. if someone could check it out for me in internet explorer that would be great. just click on the name above!

  69. Free Favicon Says:

    @Cotorra Films Thanks for this. I have been extremely busy and not had much time to look at people’s sites. Everyone give Cotorra Films a pat on the back!

  70. Tabib Says:

    Thanks for the tip.
    Finally I can save my flavicon image in blogger.
    Thank you!

  71. Morgan Says:

    LOVE the tips however…..I get this error when I tried to do the favicon editing:

    We were unable to preview your template

    Please correct the error below, and submit your template again.
    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”.

    I followed step by step, what could be wrong?

  72. Free Favicon Says:

    A lot of problems installing the favicon in blogger from the code above is caused by the quotes not copying correctly. Please double/triple check the quotes. Occansionally when people copy the code out the quotes are not single quotes (‘) but rather (`). This will break your template and not display the favicon.

    Double/triple check your quotes, or even better retype the quotes to make sure they are single quotes.

  73. how to make a favicon Says:

    nice tutorial, thx for shareing

  74. ZaaRz Says:

    Work!!! Thanks, it was really nice guide…

    btw, for Morgan questions…

    Please correct the error below, and submit your template again.
    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”.

    i think u should check the quote again. Change all (’) symbol to (‘) symbol because it was in italic mode. Or to make more easy, just try to copy this code..

    Just helping* [^-^]

  75. manoz Says:

    thanks a million

  76. Neville Says:

    I am have problems in getting my favicon icon to work on my website. I followed instructions … …
    tags of your web page.

    * How to use the Animated FavIcon: if you would like to display the animated favicon, upload
    animated_favicon1.gif also and insert the following HTML tags.

    It just does not work! Please can you help?

    Regards,

    Neville
    -

  77. naqiu289 Says:

    Thank soooooooo…. much………….

  78. Constantin Says:

    I’ve tried everything: gif and png but nothing works…
    Is it because of Blogger?
    Also checked the quotes and still no result.
    Anyone managed to make it work on Blogger?

  79. Lina Says:

    OMG, Have been trying this for hours and then I took your advice and changed all the quotes manually to single quotes, even though I was sure they were all single anyway. It did the trick. THANK YOU!!!

  80. Jason Says:

    I found that changing the single quotes to the double quote character throughout the code made it work.

  81. Bizstra Says:

    Thank you for your tutorial. I did it! Thanks again

  82. Srinu Says:

    Nice tutorial But i have simple tutorial How to change the favicon in XML Blogger template in 4 easy step.

  83. dves Says:

    Oh Yeah! I got it. I finally made it. thanks for this info. At first I did it but nothing happened. Cannot save the blogger ‘coz of wrong html. But as I thorough analize it I found the error. There is a space after href=’ before putting an icon’s site and space after on it. Thanks again for this great post.. I bookmarked this to tell a friend in the future. Just keep it up.

  84. Free Favicon Says:

    @dves Good to hear it worked for you.

  85. Sam sall Says:

    IT WORKED …Thank you so much… you are brilliant…i booked marked this post too

  86. Wanda Says:

    Worked great! Thanks sooo much! Your a genius!

  87. Virgel Says:

    Awesome! works like magic, it’s currently working well on my site using your updated code but it seems to only work in Firefox and not in IE. How wonderful it would be to see an update to this tutorial that also works in IE. In any case, I pass the full credit to you for sharing this. All the best.

  88. TSS Says:

    Thanks for all of the tutorials and guidance. Took a minute to get the code right, but it is now working.

  89. abbey Says:

    thanks for your hints on changing blogger favicon. this is what has been my headache for long s I register my blogger on domain name.

    http://www.wealthstreet.info

    but now I have changed the favicon stress free.
    thanks.

  90. Kathryn Says:

    I cant seem to see anything happening.. I think I did something wrong can you help me?

  91. Amjath Says:

    Hi…I finally got it. Thank you buddy…:)
    But its not showing up in any other browsers except Firefox, why??????

  92. Noavy Says:

    Thank you so Much !
    Take a Look … to my blog.

    I hope you don’t mind , I will talk about you on a post and add your link on it. !

    Thank you very much !

    Kind Regards

    Noavy.

  93. daniel Says:

    Its awesome tips & working. Thanks for sharing.

  94. Eric Says:

    Jason said : “I found that changing the single quotes to the double quote character throughout the code made it work.”

    It also worked for me! Thank you :)

  95. the money paradise Says:

    thanks for making it possible to add favicon to my blog. thanks
    themoneyparadise

  96. Sandeep Tripathy Says:

    Thanks buddy,
    Your instructions were really easy to understand and it was very simple to get the favicon placed.

  97. Cinta Super Says:

    thanks! it is very straight forward. and it works for my blog.

    muchas gracias.

  98. amy777 Says:

    thanks….finally favicon is in my blog…..

Leave a Reply