Adding a Favicon on Blogger

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

7 Reasons Favicons Increase Your Website Traffic
How to Create Your Own Favicon
20 Free Favicon Icon Sets
Quick Favicon Tip to Insure its Visibility
Adding a Favicon on Blogger

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.

October 4th, 2007

Subscribe via RSS

Comments (54)

menopauseprincess on October 4th, 2007 at 11:58 am

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!
Sarah on October 4th, 2007 at 1:14 pm

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.
menopauseprincess on October 4th, 2007 at 2:27 pm

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!
Sarah on October 4th, 2007 at 2:31 pm

Your new favicon looks awesome! Great job!@#!$#%!
Monika @ The Writers Manifesto on October 4th, 2007 at 6:10 pm

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
Felix Ker on October 5th, 2007 at 7:56 am

@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!
david on October 5th, 2007 at 9:53 am

I have seen some animated favicon. What format should the graphic be if you want the favicon animated.
Sarah on October 5th, 2007 at 10:53 am

@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.
WarriorBlog on October 5th, 2007 at 9:28 pm

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
Annie on October 6th, 2007 at 2:47 pm

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.
In Giving, You Are Really Receiving : Warrior Blog dot Net on October 7th, 2007 at 2:39 pm

[...] Adding a Favicon to Blogger by Sarah at BlueJar [...]
Telling It Like It Is on October 20th, 2007 at 1:52 pm

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…………
Supp G on January 4th, 2008 at 11:21 am

This would be great useful information if only I used the blogger platform – still, thanks for the tips!
Web 2.0 Traffic Trend Watcher on January 18th, 2008 at 1:41 pm

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.
blogfrog on February 22nd, 2008 at 3:44 pm

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???
Create a Favicon For Your Blog or Website | on February 22nd, 2008 at 4:03 pm

[...] Adding a Favicon on Blogger [...]
What is a Favicon, Why you need it, and How to add one to your blog… | ROCKFUSE on May 25th, 2008 at 10:47 am

[...] 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. [...]
Find Torrent Search Engine on May 30th, 2008 at 1:43 pm

Hey thanks this was very helpful. And now I’ll go make a favicon…
Wordpress Hosting on June 5th, 2008 at 5:57 pm

A favicon is an excellent way for people to remember your site when they bookmark it.
pszetfurnia on July 4th, 2008 at 1:07 pm

http://www.myfavatar.com/ does not exist.
Flickr does not allow to store .ico files.
josh solar on July 16th, 2008 at 4:46 am

Thanks so much! I’ve been trying to make this work for a while now!
rahul on July 26th, 2008 at 10:47 pm

Hey can you tell me where exactly should we paste the script in blogger between the start and end head
Maura on August 9th, 2008 at 10:05 pm

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.
Dedicated Designing Services India on August 18th, 2008 at 5:05 am

Nice Tips. Thanks for share
KUMAGCOW on September 14th, 2008 at 3:56 am

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!!
Anand on September 30th, 2008 at 8:19 pm

Thanks a lot.. my favicon is up and running
http://anandjage.blogspot.com/
Richard on November 25th, 2008 at 4:51 pm

Thanks so much, your advice rocks. Brilliant. really well explained and simple, even for html novices
Tobias Davis on December 23rd, 2008 at 9:48 am

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!
helen on December 27th, 2008 at 4:16 am

you can download icons to create favicon at free icons
Matt on December 28th, 2008 at 8:29 pm

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
icons on December 29th, 2008 at 7:14 am

I added your page in my blog’s .
Thanks for linking to my blog !

Cheers,
ico
helen on January 1st, 2009 at 8:04 am

nice tutorial, I will change my favicon with this tricks
robins on February 21st, 2009 at 4:20 pm

Hi

Thanks for this it works well with Internet explorer, but for some reason not with Mozilla Fox any advice?

robins
robins on February 21st, 2009 at 4:22 pm

Ignore previous comment. I have worked out why thanks.
Fizz SLicker on February 23rd, 2009 at 8:16 am

Thanks a bunch~!!

very useful and WORKS on Chrome Google too!!
Nashville Web Designer on March 10th, 2009 at 8:43 am

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.
amanda on March 18th, 2009 at 7:50 am

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
Izzy on May 27th, 2009 at 12:34 pm

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.
negativethinker on June 3rd, 2009 at 4:45 pm

hmm thanks for the step but flickr is not hot .ico file anymore… huhu got to find other alternative.
Download Youtube Videos on June 6th, 2009 at 7:05 pm

Like always very useful!
Marie on June 20th, 2009 at 7:27 am

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
how to make a favicon on June 27th, 2009 at 2:53 am

thx , great tutorial
Ricardo on July 17th, 2009 at 4:34 pm

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.
qwerty on July 23rd, 2009 at 4:39 am

very informative ,but the service myfavator is stopped as it displays another home page
carl on September 5th, 2009 at 4:46 am

thank you so much! it worked
your_a_gay on September 18th, 2009 at 12:29 am

“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
Darius on September 19th, 2009 at 3:39 am

I find that this .ico extension the most important if you want your favicon to work properly
Srinu on October 20th, 2009 at 8:55 pm

nice tutorial but i have simple tutorial see this How to change the favicon in XML Blogger Templates in simple 4 step
Moe Ali on October 30th, 2009 at 1:09 am

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.
Lauren @ Hobo Mama on November 15th, 2009 at 3:24 am

This totally worked and was easy to do! Thanks so much for the clear instructions. My site looks “real” now.
Blogging Tips on November 20th, 2009 at 10:45 am

I was searching for this since last few hours. Thanks for sharing it.
Fauzan Husin on November 22nd, 2009 at 9:23 pm

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
RankMyForum on December 19th, 2009 at 8:58 am

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.
petertran on January 23rd, 2010 at 6:59 am

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.