Add a custom favicon to your Blogger blog

By Amanda Fazani | Blogger

Apr 27

favicons-for-bloggerWhen you publish a blog with Blogger, the default favicon which appears in your browser navigation bar is Blogger’s favicon (the unmistakable orange and white logo).

Many Blogger users choose to display their own favicon instead of Bloggers, in order to “brand” their blog with memorable icons in keeping with their blog’s design. It is actually quite easy to add our own favicon to our Blogger blogs, and instantly adds a sense of professionality to your overall design.

In this post, I’ll explain how easy it is to add a favicon to your Blogger blog, along with resources for designing your own favicon and where you can host this for free.

What is a favicon?

The word “favicon” is short for “favourites icon”, and is a 16x16px square icon which is associated with a website (or blog). Browsers which support favicons will usually display a website’s favicon in the address bar (to the left of the URL), and next to the page’s name in a list of bookmarks. Browsers which support tabbed navigation (such as Firefox and IE8)  will also display the favicon next to the page title on each tab.

Favicons are usually found on the root of a domain, and use the .ico extension. For example, the favicon for Blogging Tips can be found here:

Blogger users do not have access to the root of their blog hosting. This means that unless an alternate favicon is specified, Blogger’s favicon will display in browsers accessing Blogger powered sites.

In order to add a custom favicon to be displayed in the browser of sites accessing a Blogger powered blog, we need to:

  1. Create our own favicon
  2. Upload this to an image host
  3. Edit the Blogger template to reference this alternative favicon.

Let’s go through these steps in order.

How to create your own favicon for Blogger

A favicon is a small image, measuring 16×16 pixels. Favicons are usually made with the .ico extension, though it’s also possible to use .GIF and .PNG files to reference a favicon.

If you are a budding ‘Photoshopper’, you can create your own favicon from scratch. Don’t forget to use a canvas measuring 16 pixels square (or create a square image which can be reduced to this size) and save as a .GIF or .PNG image.

Those who already use a recognised icon for their site/blog logo can easily generate a favicon using one of these free services:

Alternatively you can download a “ready made” favicon from these sites:

Upload your favicon to the web

While Blogger does not offer hosting for files we use in our blogs (eg: JavaScript, documents and HTML files), we can upload images for use in our blog posts which are hosted by Picasa.

After uploading an image to our blog post (even if this post is not published) we can extract the URL of the image and reference this in our Blogger template code. Surprisingly, we can upload .ico files to our blog posts with Blogger (as well as any .PNG or .GIF favicons you may have created too).

To upload your favicon to Picasa through your blog, simply create a new blog post and choose to insert an image in your post. Choose the favicon you have created/generated/downloaded and upload this to your post.

Then either preview your post or view in the rich text editor so your favicon image can be seen on the screen. Right click this favicon and choose to copy the location of the image. Save this to your clipboard or paste into a text file for easy reference.

If you prefer to use a different host for your favicon, here are a few free hosts which support .ico files:

As before, copy the location of your icon file to yoru clipboard or paste in a text file for easy reference.

Add the reference for your favicon to your Blogger template

The final step to creating a custom favicon for Blogger is referencing the favicon in your Blogger template code.

To do this, go to Layout>Edit HTML in your Blogger template. You do not need to check the “Expand widget templates” box.

Search for the closing </head> tag in your template using your browser’s search function.

Immediately before this line, paste the following section of code, substituting YOUR-FAVICON-URL for the URL where your favicon is hosted:

<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>

Then save your template. Now when you view your blog in your browser, you should see your favicon appear beside the web address and in the bookmarks folder (if you have bookmarked your site).

Note: it is very important that you paste the favicon tags just before the closing </head> tag, not earlier in the template code. This is because Blogger generates favicon tags when your blog pages are generated which would otherwise override your custom favicon references.

Important information when using custom favicons for Blogger blogs

If you use Internet Explorer 6 or older, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.

Also, any services which automatically extract the favicon for a site (such as Blogger’s “Feed” and “Blog List” gadgets) will still reference the Blogger favicon rather than our own custom favicons. This is because such auto-discovery scripts reference the favicon hosted on the same server as the website, rather than the favicon which is referenced in the HTML code of the page. As yet, there is no way to present our custom favicons to services which automatically discover the favicon for a site.

Your thoughts?

I hope this tutorial enables you to add custom favicons for your own Blogger blogs with ease. If you know of any other simple methods for creating custom favicons for Blogger, please let us know in the comments below.


About the Author

Amanda is a freelance blogger and web/blog designer. She writes about Blogger at and maintains several other blogs on various subjects.

PV Reymond April 27, 2009

Hi Amanda,

It is a great tip.

If you use your own favicon you are creating your brand, it can set your blog apart from the standard blogs using blogger.

I think it is important to use a favicon for your site too.


^PV Reymond

Tom White April 28, 2009

Its amazing how quickly a favicon has become a standard element on most websites now – although some of the 'older' websites are taking a big longer to catch-up – a sign of them becoming out of touch and slow to respond perhaps.

Thanks for a interesting post, now having said that I need to get around to a favicon for one of my websites….!

Toothache Relief Guide

Arsenal Poker Club April 30, 2009

After searching for two days, i finally came across your site with the correct information about how to install a blogger custom favicon.

I appreciate the knowledge in this post because it was exactly what i was looking for. I used Google Sites to upload all of my images since they allow all different types of file formats. These are the links used for my custom favicon using Google Sites, Blogger, & Godaddy Custom Domain Name.

I want to stress that These instructions on this post are Essentially Correct for anyone using Custom Domain Name Hosting. Other blogging tip websites inform you to put your favicon links near the header of your blogger template which was INCORRECT for my situation.

Those false instructions will only work however if your are using's free blog hosting service.

Custom Domain Name Hosting is a paid for SERVICE !!

Thanks once again for the information posted here on

Paul April 30, 2009

You can't see my template edit in my previous post. Maybe it will shown now:

Paul April 30, 2009

I did everything as said above, but it doesn’t work! I really don’t know why. I edited my templateHTML and it looks like that:

What might be wrong?

Josh May 1, 2009

I found that this favicon code would work on Firefox (on Mac), but on not Safari. Because of this I didn't even know if it was working at first, since I use safari. However with a little help from google, I found this code to enter the favicon into the document, and it works on everything I have tested. The process is the same you described (how I did it as well) right up until the code before the HEAD tag.



Josh May 1, 2009

used the code tag on it, but looks like it is still not appearing on my comment…

Darlene S. September 16, 2010

Thank you so much for this easy to follow post! This worked like a charm! :)
My recent post Retro- Robot Themed Birthday Cards

alpona September 26, 2010

Thank you for learning the step in easiest way.

The Mobile Spoon September 27, 2010

Great tips, works like a charm, my only problem is that no matter how I make my logo look small – it doesn't seem sharp enough:

I'm using iconj.omc – any tips for that problem?
My recent post Is Texting While Driving Really Dangerous

@milindbawankar September 27, 2010

This is really a great post. The fact that it is a big help for everybody, especially those who loved and is fun of blogging. I will make sure to apply what i have learned from your post. Thank you for the tips.

josh October 1, 2010

worked perfectly for me. and yes, if you put it earlier in your <head> code, it will disappear. boom!

Norman October 5, 2010

This is a very useful tip especially to those who aren't self-hosting their site.

Actually this so still applied to blog that are self-hosted. Tried it on my part and still worked like a charm.

Btw, I suggest you use .png for icons and not .gif. PNG for me looks better. 😀
My recent post Super Checkers

Guest October 13, 2010

Just tried this in Blogger and neither Blogger nor Picasa support .ico files. How did you guys get this to work for you?

    Chronic Override October 24, 2010

    Don't use an ICO file. Use a PNG for the best results. Both the sites you have mentioned support this file type.
    My recent post Geeks Genesis

106boom October 27, 2010

great tip!! specially this thing of pasting the code just before the </head>. thanks
My recent post recycle current location = 7 levontin st. tel aviv

Holiday Packages November 12, 2010


Web Designing USA November 16, 2010

Awesome! works like magic, its 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.

marionette December 21, 2010

thanks so much! i've been searching for this!
My recent post Siti is the best of all ! ♥

Kirie December 22, 2010

Thank you :) You wrote it really clearly.
My recent post Christmas gingerbread cookies and Christmas Greetings

Raviraj Deora December 30, 2010 perfectly
My recent post INTERNATIONAL KITE FETSTIVAL-2010-Sabarmati River Front- Ahmedabad

Angel December 31, 2010

Pretty good :) Happy New Year :) I wish You all the best !
My recent post Miu – baroque element

Mike January 2, 2011

Thank you for you tips. I'm almost smart enough to follow them to make favicon work.

desain January 4, 2011

thank you for posting this.
i found something useful favixon
My recent post 25 Christmas Theme 2010

Web Informer January 10, 2011

if i want to use any icon that is in my hard disk not on web den how can i change my web icon
My recent post RSS Developers history

behzad January 14, 2011

i did same steps. my favicon is not being shown noe. It worked fine for 3 days. Can you help me here?

Tina Thorsen February 7, 2011

Hi Amanda, I have been searching all over the place for an easy way to do this. I read your blog and followed your steps, but I my favicon is not appearing. Does it take awhile? If this works, I will definitely post this on my site with a reference to your blog!
My recent post PC Repair North Shore

oliver February 17, 2011

It's not working for me : (
My recent post

Rhonnie February 28, 2011

Gah I tried using .ico and .png, tried with original code and by using the code tags around it but still no joy.
I'm using blogger and put the new code immediately before the head tag.
My recent post

Appreviewfree March 2, 2011

Thank you for this tutorial!
My recent post Nofinder – free photography app

@soothsayerpg March 4, 2011

Hi amanda.great tutorial by the way.
but my i ask,where to upload the favicon for people who doesn't own a host or domain(like me),only blogger.
where can it be uploaded?
My recent post Tired of the same MMORPG

Abigail March 5, 2011

Absolutely wonderful information! This was so easy. Thank you so much for helping my website look more professional!

aga March 10, 2011

hi Amanda,
thanks for your tips.
am trying hard but it does not work.
this comes up: iYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The reference to entity "postID" must end with the ';' delimiter.

what shall I do? any tips? would be grateful.

Lion Templates March 27, 2011

Thank you very much for the tutorial. It is really helpful.
My recent post Senja 2R

lacretiat April 11, 2011

Great tutorial! Thanks for the tips! Here's my web site so you can see the favicon I created!

autumn May 6, 2011

Very, very helpful thank you! I have searched for tips about this in other blogs but couldn't get it to work until i found this tip of yours. So easy to follow and very much detailed. Thanks so much! *hugs*

Asian Tv May 21, 2011

Hi I added the code exactly as shown but with my url and double checked to make sure it looked the same but the blogger logo still shows up. What am I missing?
My recent post Watch Chhoti Si Zindagi 20th May 2011

Trail Guy May 25, 2011

Hi Amanda, appreciated this tutorial and it worked perfectly up until about 4:00 p.m. PDT yesterday (May 24, 2011. It seems that our friends at Blogger decided that they didn't like having their brand bypassed and made a change that overrides custom code for favicons before the </head> tag.

Was hoping you might be able to provide an updated solution that would mitigate the change they've made on their end. This was an older post so I hope you're still writing and can help with a workaround.

Thanks in advance!

~Trail Guy

@Omemee4U May 28, 2011

WooHoo! Fantastic clear post! It worked. To make the animated favicon for our village paper I used an online generator after creating a picture in Picnik Thank you for the great tips!

RoxyBot June 2, 2011

Thank you SO MUCH for this blog. It was soooooo easy! If you don't mind, I will be eventually blogging about this. You will get all the credit, but I want to blog my experience if that's okay.

Wynn Anne June 7, 2011

Hmm. Blogger would not let me upload a .ico file. Even with a .png file, inserting the code and url you suggested (substituting my url) did not work.
My recent post Odd Coincidences

Shah Rizar June 26, 2011

its work.. thanks
My recent post Cara Mengatasi Rasa Bosan Dalam Kelas

Comments are closed