How to change blogger favicon

First of all, what is favicon?
Favicon is a little icon that precedes the URL in the address bar of your browser. Favicon is also displayed on the title tab.

Now take a look at your address bar, do you have an icon there? Do you like it? If you do, fine. But if you don’t, you actually can change that. I’m going to tell you how.

Below are the steps to replace your favicon:

  1. Design the icon you want.
    You don’t need special software to design it. There are many online favicon generator sites available. Justskins.com introduces 15 favicon generator sites, you can choose the one you like. Or you can search free ready made icons on the net.
  2. Once you have an icon ready, upload it to an image host (i.e. Photobucket, Imageshack, Flickr etc.). Once uploaded, get the direct URL to the icon.
  3. What you want to do next is to link the icon to your blog.
    Go to Dashboard > Design > Edit HTML and find this line of code:

    <b:skin><![CDATA[

    Insert the code below immediately before that line:

    <link href='PUT YOUR FAVICON URL HERE' rel='shortcut icon' type='image/x-icon'/>
  4. Save the template, and click on View blog button. You should see the new favicon on display replacing the old one.

45 comments to "How to change blogger favicon"

Azam April 4, 2009 at 10:22 AM    

Cool tips. How can I do it with hosted Wordpress?

GreenLava April 4, 2009 at 1:40 PM    

Azam,
I'm not familiar with Wordpress, but I think the process is similar. Insert the code in yellow in the Head section.
Or you could checkout Wordpress support on adding a favicon at http://wordpress.org/support/topic/188841.
Hope this helps.

rozidah imran April 4, 2009 at 3:28 PM    

Wow thanks!! Already done it!
Great tips ;)

Greenlava April 4, 2009 at 3:34 PM    

To Rozidah,
Wow you really did it, that was quick!

Computer Howto April 21, 2009 at 11:36 AM    

Thanks you great post and great site!

Greenlava April 21, 2009 at 2:50 PM    

@Computer Howto, thank you for stopping by, do come back for more tips.

Mamí♥Picture September 21, 2009 at 5:45 PM    

Thank you so much for this post!
You just help me to install my pretty favicon!!!!
thanks thanks thanks!!!
http://www.youandmeplusthree.net

Greenlava September 23, 2009 at 12:16 AM    

My pleasure ♥Rocío♥.

Alchemist21 October 18, 2009 at 1:35 AM    

Yes it does work with .ico. Just have to be patient, refresh the page some times etc.
Thanks a lot guys!

Anonymous,  December 12, 2009 at 2:46 PM    

thanks!

Remodelaholic January 9, 2010 at 1:04 AM    

I believe you are going to get sick of my questions. I was so excited when looking through your blog list to find this post, and it seemed like one of the eastiest changes I have made... but nothing showed. I tried it on three of my blogs. my test blog, my real blog and my blog roll blog... Here are the adresses, you can just look at one if you want...
http://figuringoutblogger.blogspot.com/
http://www.remodelaholic.com/
http://mybiglistofblogs.blogspot.com/

I saved the image as a 32 x 32 pixel gif, as well. just fyi.

Thanks in advance!

Remodelaholic January 9, 2010 at 1:30 AM    

p.s. I just checked and it shows up in mozilla, just not internet explorer.

Greenlava January 9, 2010 at 2:55 AM    

@Remodelaholic
To make it show up in IE, you have to use an .ico file. But I'm yet to find a free host that accepts .ico files.

Eurasia Review January 11, 2010 at 7:01 AM    

If you have a google apps site related to your blogger domain, you can host the ico file there, and it will show up in IE

I am changing my favicon now, but you can see what I mean here: http://www.eurasiareview.com/

rexx February 6, 2010 at 8:59 AM    

thanx greenlava!
it works!!

rexx February 7, 2010 at 11:37 AM    

do you know how to remove the 4 button on my blog??

(these are the button)
archives..
categories..
rss feeds..
admins..

rexblogkomputer.blogspot.com..

Greenlava February 7, 2010 at 12:15 PM    

@rex
Go to Layout>Edit HTML. Find and delete this code (from div until /div):
[div class='links']
SOME CODES HERE
[/div]

rexx February 7, 2010 at 1:32 PM    

thnx.. it works..

Anonymous,  March 2, 2010 at 11:20 PM    

Hi There

I notice that for instance in firefox it works on all my pages by the main page. Any reasons why this could be?

Thanks,

Chris

Greenlava March 3, 2010 at 2:07 AM    

@Chris
Make sure the code is placed immediately before
< b:skin ><![CDATA[

Minchin Web April 29, 2010 at 5:22 AM    

I followed the above instructions, and I get the Favicon to show up in Firefox and IE, but not Chrome. Suggestions? Thank in advance!

http://blog.Minchin.ca

Greenlava April 29, 2010 at 7:56 PM    

@Minchin Web
Chrome? I'm afraid I can't answer this one right now as I haven't even tried Chrome yet.

percaine May 11, 2010 at 10:03 PM    

I tried to change the blogger favicon on my blog but its still the orange B. I've tried to replace the code in the html editor for my blog but the line that you mention above isn't there.It does show up when I check the source code outside of blogger(when I am not signed in) like on firefox.
I'm assuming that they don't want it to be changed even though I have my own custom domain.Either that or I'm missing something.Any advise would be appriciated.

Greenlava May 12, 2010 at 1:55 AM    

@percaine
The link you are using is a not a direct link. What you want is a direct link (or hotlink) to the image. It should look something like this:
http://www.picpanda.com/images/pfmb5i6ilt8fzqvjqeai.png
in Picpanda copy "Hotlink for Websites" code and extract the link similar to the above.

Unknown August 6, 2010 at 11:17 PM    

@Greenlava, moving the code immediately before
< b:skin ><![CDATA[ fixed it for me. Thanks for the tip!

Anonymous,  August 18, 2010 at 8:21 AM    

The favico doesn't show up in google chrome, but this blog sentral favicon showed up on google chrome, weird?

JustForYouToKnow August 18, 2010 at 10:03 AM    

Found the solution to make it appear on google chrome browser
add this extra code type='image/x-icon' no need to change the attribute.

so the code will look like this one bellow



I hope this help....

Greenlava August 18, 2010 at 11:25 AM    

@JustForYouToKnow
Thanks for the solution. I will update this post to include that :)

UDAYMUSKAN August 23, 2010 at 9:39 PM    

good idea thank u a lo of..

Jobsnownig.com September 19, 2010 at 6:47 AM    

http://www.flickr.com/photos/53846591@N03/4979441103/

i av this on flickr and input it in my html but its not working.

Greenlava September 19, 2010 at 8:18 AM    

@Jobsnownig.com
That's not the direct link to your image. A direct link usually ends with an image file extension such as .jpg, .png or .gif.
Umm well this is the correct link:
http://farm5.static.flickr.com/4132/4979441103_d65ebee887_m.jpg

Zilla December 7, 2010 at 2:40 AM    

I was driving myself crazy trying to figure out how to do this, you made it easy! Thank you so much!

Kelly December 12, 2010 at 8:04 AM    

Thanks so much for posting this! Talk about easy-I've tried several ways that were posted before on different sites, but this one worked slick. I used Flickr. Thanks again! :)

Greenlava December 12, 2010 at 8:09 PM    

@MJ Stevenson
@Kelly
My pleasure :)

Zeynabu-Le'Von December 18, 2010 at 6:26 AM    

This is so helpful - I went to 3 other sites and they had instructions on how to do this but nothing worked for me. Then I remembered that your site also helped me to remove the navigation bar, I came back, did a quick search, and voila, new icon! Thank you so much!

Greenlava December 18, 2010 at 9:26 PM    

@Zaaynab Le'Von
Assalamualaikum, good to have you back here :)

Anonymous,  December 29, 2010 at 10:58 AM    

I went to five other posts before finding this one...the only one that worked! -thanks

Greenlava December 29, 2010 at 1:55 PM    

@Dr Eliot
My pleasure :)

Anonymous,  December 31, 2010 at 8:40 AM    

Thank you so much. it's working for me.

cd April 12, 2011 at 11:03 AM    

i have problem..the icon only show at homepage only..when i click other post or pages, the icon changes back to Blogspot icon

Greenlava April 12, 2011 at 11:12 AM    

@cd
You probably placed the code inside a conditional tag.
Look for < b:if cond=......< /b:if>.
Make sure you place the favicon code outside the tag.

allie harris July 4, 2011 at 8:50 AM    

It didn't work. Still has the Blogger logo on it.

Greenlava July 4, 2011 at 4:28 PM    

@allie
I see you have this in your template:
[link href='favicon.ico' rel='shortcut icon' type='image/x-icon'/]

you have to replace favicon.ico with the actual URL to your favicon image. And of course to get the URL, you have to create and image and upload it into a server first.

As an example, this is the code I use for this blog's favicon:
[link href='http://4.bp.blogspot.com/_nHEt80wjI5c/TIz5HyUK2iI/AAAAAAAABi4/5o1H3nrNcg0/s1600/bloggersentralfavicon3.png' rel='shortcut icon' type='image/x-icon'/]

iswearonthesmiths August 6, 2011 at 1:55 PM    

amazing how that worked. i searched and searched for the right way and almost gave up. thank you!!!

TwynMawrMom July 17, 2013 at 7:59 AM    

Super easy, thank you!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.