
Blogger is a very popular free Blogging platform, but each free blogs comes with the same exact default favicon that Blogger is using. You can help set your blog apart by getting your very own unique favicon plus there are a lot of benefits with having your own favicon. This post is in response to menopauseprincess. She asked about Blogger blogs having their own favicon.
Creating or finding your favicon
If want to create your own favicon, you can follow my guide on creating your own favicon. You can also find a free favicon from the 20 free favicon resources I have collected. I’ve used both unique and free favicons, I just try to use a favicon that represents what my website is about or something that is rememberable.
Uploading your favicon
You will need to find an alternative host for your favicon because Blogger does not host custom favicons. A lot of free file hosting services will not host .ico file types, so these are not good options. If you don’t have your own web hosting account, there is a service called myFavatar that will host your favicon for free. Flickr will allow you to host .ico files also, so if you have an account there already that may be a good choice.
Linking to your favicon
You will need to do some updates to your templates in order to get your favicon to show up. This part might get tricky, so if you need any additional help please don’t be afraid to ask. To edit your Blogger templates, after you login go to “Layout” –> “Edit HTML”. Now you will need to add the following line of HTML between the start <head> and end </head> tag:
<link rel="shortcut icon" type="image/ico" href="http://example.myfavatar.com/favicon.ico" />
Make sure you update the location of your favicon to the exact web location where you uploaded your favicon. If you do use myFavatar to host your favicon, they will actually provide you with the exact code to paste into your templates.
Testing your new Favicon
Typically when you save your templates and reload you should be able to see the new favicon. But occasionally there may be settings in your browser that may prevent your favicon from showing up, so you may need to reload or clear your cache in order to see it right away.
Comprehensive Guide to Favicons Series
If you liked this post, subscribe to my full RSS feed. Learn more about rss feeds with my quick guide. You can subscribe through e-mail too.

Thanks so much for remembering this Sarah, I’d even forgotten I’d asked this question. This information will be very helpful for all folks on Blogger. You rock girlie!
No problem and thanks for asking! I couldn’t forget that you asked, I’ve been planning the post for a while. Just finally got it finished.
You are fabulous! I’m not the most tech savvy person so I’ve been working on this since I posted the first comment, but 4 hours later-Voila! I have a favicon, yea!!!! Thank you!
Your new favicon looks awesome! Great job!@#!$#%!
Hey Princess,
Your favicon looks awesome. I’ll have to change mine now since I have a new design up and rolling.
Great tutorial Sarah as always
Monika
@Sarah your icon has a black BG! is it meant to be this way?
btw, i just noticed blogger hosts blogs on my own domain too! will try them someday!
I have seen some animated favicon. What format should the graphic be if you want the favicon animated.
@Monkia: Thanks :c)
@Felix: Black is the transparent color for .ico graphics.
@david: Favicons that are animated are .gif format. Now, it will work but not everywhere if they are still looking for a favicon.ico images. So what I would suggest is to create a .gif and link it in your header:
<link href=”/favicon.gif” rel=”icon” type=”image/gif” />
Than make sure you also save the same image as a favicon.ico and stick in the same folder so browsers or other services still can find your favicon if they are still looking for the old format.
Not very hard at all. I am a bookmarker and never use RSS feed, so it is VERY useful for me. It actually is a little annoying for me to bookmark site with no favicon.
Fine post Sarah
This is a nice post, Sarah. I keep meaning to have someone design some of these for my sites. I didn’t realize you could even do it for the freebie Blogger blogs. Love your jar.
[...] Adding a Favicon to Blogger by Sarah at BlueJar [...]
hmmm, I’m wondering if Blogger has somehow got it blocked, ’cause I followed the directions to a “T” but it’s not showing up. I do appreciate your post on this, and now I’m going to try to figure out how to hide the navigation bar in blogger. The previous codes don’t seem to work anymore. sigh…………
This would be great useful information if only I used the blogger platform – still, thanks for the tips!
When I see a website without an favicon the first thing I think is Amatuer Webmaster. Such a simple thing to add to show that you are a professional that takes note of the ‘little things’.
I enjoyed your perspective on how favicons create traffic.
Hi,
has anybody a good idea why this:
——————————————————–
————————————————————
is not working right under the head tag? I’ve been fu..ing around for I don’t know but couldn’t solve it. It works well when I use google web creator but not when I store the ico on rapidshare. Why???
[...] Adding a Favicon on Blogger [...]
[...] It’s that easy for a WordPress blog. But, the non-automated way to do this is to add a couple lines of code to your header file, which is exactly what Blogspot bloggers should do. [...]
Hey thanks this was very helpful. And now I’ll go make a favicon…
A favicon is an excellent way for people to remember your site when they bookmark it.
http://www.myfavatar.com/ does not exist.
Flickr does not allow to store .ico files.
Thanks so much! I’ve been trying to make this work for a while now!
Hey can you tell me where exactly should we paste the script in blogger between the start and end head
Thank you for this. I’m not an expert by any means but I had this done in 15 minutes with your help. The only part that threw me was where you said to “go to ‘Layout’” on Blogger, because (for me, at least) the “Edit HTML” portion is under “Manage: Template.” After that, it was cake.
I wasn’t able to upload my favicon to Flickr, so I hosted it on my old Yahoo! Geocities page, where I store all images for my blog.
Nice Tips. Thanks for share
I googled you.. found the instructions here and boy I got it working! I just hosted my file in shokimages.com
now if you check out my site the COW is there!
http://www.shokimages.com/file.....kddtnd.ico <<< this is my ico file yipeeee!!
Thanks a lot.. my favicon is up and running
http://anandjage.blogspot.com/
Thanks so much, your advice rocks. Brilliant. really well explained and simple, even for html novices
I don’t know when Blogger started this, but the official Blogger favicon must be inserted in the part that says:
So essentially, I put it in as you said, but it didn’t work because of a later (in the html document) instance of a favicon by Blogger. How to fix? Easy! Just put your own favicon code *after* the Blogger code. The easiest way to do that is put it at the very end of the section.
Find the piece labeled and insert the code immediately before it. This way, Blogger will insert their own favicon, but your later instance of it will overwrite theirs. Easy peasy!
Thanks to BlueJAR!
you can download icons to create favicon at free icons
I think it’s http://www.myfavatars.com/ actually, only I don’t think they’re hosting at the moment. There’s also http://www.fileden.com/ if you can stand non-stop ads
I added your page in my blog’s .
Thanks for linking to my blog !
Cheers,
ico
nice tutorial, I will change my favicon with this tricks
Hi
Thanks for this it works well with Internet explorer, but for some reason not with Mozilla Fox any advice?
robins
Ignore previous comment. I have worked out why thanks.
Thanks a bunch~!!
very useful and WORKS on Chrome Google too!!
Great tips… I just read a similar article on wordpress favicons… I am glad to see the interest in these little overlooked icons… as a graphic design, I see them as just one more change at creating a memorable brand and as a web designer and web surfer, I love that they stick to bookmarks and make a website instantly stand out… keep up the good work, thanks again.
hello-
i added a favicon to website two months ago using your tutorial. i was really happy about it! then suddenly today the old blogger favicon is back! any idea why that would happen?
thanks so much!
amanda
heartloop.com
Thank you muchly for this. I Know I need a better one but for now this is better than what I had. thank you for showing me this process.
hmm thanks for the step but flickr is not hot .ico file anymore… huhu got to find other alternative.
Like always very useful!
Flickr Does NOT host .ico Files
I cannot find a single Host for the .ico Files
Geocities is closing
Google Creator is closing
Photobucket doesn’t support either
thx , great tutorial
Thanks for this post. It came up as one of the first options when I googled for “blogger favicon”. It didn’t work at first (I put the code at the beginning of the HEAD section), but then I noticed Tobias Davis’ comment. I put the code at the very end of the HEAD section, and it worked.
very informative ,but the service myfavator is stopped as it displays another home page
thank you so much! it worked
“Flickr will allow you to host .ico files also, so if you have an account there already that may be a good choice.”
Describe this upload
favicon.ico was not uploaded: That file was not a recognised type or was unable to be decoded. (We only support JPEG, PNG, non-animated GIF, BMP and TIFF.)
Misleading article you might want to fix it.
Cheers
I find that this .ico extension the most important if you want your favicon to work properly
nice tutorial but i have simple tutorial see this How to change the favicon in XML Blogger Templates in simple 4 step
I just wanted to thank you for your help, it worked. Is it illegal to change it? I want to change it and with your great tutorial I did but I’m afraid of not knowing the laws of fair use for blogger…I hope I can do that.
Thanks again.
This totally worked and was easy to do! Thanks so much for the clear instructions. My site looks “real” now.
I was searching for this since last few hours. Thanks for sharing it.
i know we can change the default favicon but i can’t find the way to do so. thanks to your tutorial, i manage to change my favicon to a better one. (”,)
fauzan
Thank you for the tutorial on how to do this. I’ve found out how to do it now for a while but this is a really good guide and I hope other people will be able to use this with ease and add their own favicon to their own blogger.
If you are new web user or don’t have any skills to create a Favicon-ICO file type.Now you can make your own favicon for blogger blog in an easiest way .( i promise that’s ).I found this newest tip over the net and sharing at here.This tip had a link included on this post -check out this post How to check and validated your favicon.Enjoy to sharing posts on Bluejar.