Skip to main content

Special Post: How to Add Favicons to Blogger Blogs?

Here is a special blog post for you. Since two days ago, you may be seeing the new tiny icon appearing on the address bar of your browser when you load this blog. This icon is known as favorite icon or favicon. This is a distinguishing feature of almost every website.

While it is very easy to add a favicon into self-hosted blogs, it is not so in case of free hosts like Blogspot blogs. The procedure is entirely different. In Blogger, you have access only to the blog layout and no file upload features. In this case, adding a favicon to your Blogspot blog requires a workaround. Here is the step-by-step procedure for that.

  1. Create Your Own Favicon

The first step of adding the favicon is creating your own unique favicon file. The favicon is a very small icon file with ‘.ico’ extension. Use one of these online services to create your favicon:

You can either upload an image file (in JPG, PNG, or GIF) and get it converted to a favicon or draw your own favicon.

My favicon was drawn, with a clear concept (see below) with the service from:

I loved their paintbrush interface to draw colors into the square columns.

  1. Upload the Icon File

Once you have your favicon ready, upload it to a web location, from where it can be accessed by Blogger. Remember, icon file is a small image file with ‘.ico’ extension. But, it cannot be uploaded to Flickr as an image. It is worthless to upload to Rapidshare or any such file sharing systems. So, what I did was create a free webpage with Googlepages, and upload the file there.

For that, you have to sign up in Googlepages and create a free web space there (here is my site: In this account, you have the privilege to upload any sort of files as in self-hosted blogs. Here is the screenshot of the file upload feature.

Screenshot of favicon upload

  1. Add This Script to Your Blog

As the third step, in your Blogger profile, go to layout and click ‘Edit HTML’. Then, just add the following code after your code’s title tag:

<link href='Your Icon URL' rel='shortcut icon'

On adding this script, please replace the Your Icon URL with the correct URL of your favicon.

Once you have this script ready, save the template and check the website, your favicon should be loading fine.

I tested my site with Mozilla Firefox, Internet Explorer, and Opera. In all, the favicon is showing just fine. In case of IE, the favicon load time (for CuteWriting) is rather long, but it is only a special case. In case of IE engine loaded within Firefox, the favicon doesn’t work for any website.

Thanks to Tips for new bloggers article, which formed the basis of this tutorial.

About My Favicon

As you see, my favicon consists of four colors on a black background. It is meant as a symbol of cooperation to spread the light of knowledge. Materialistically, it is the confluence of the basic colors, blue, green, and red to form white.

Now let’s get to its envisioned meaning. Blue emanating from the bottom represents my this blog, CuteWriting. It is a contribution to the good of the society. The green from the side is the general acceptance to the blog—my readers who support me. The red from above is the healthy criticism I receive (intended to be coming against blue). All these three colors congregate to form the white line, which is the bright light of wisdom and knowledge.

The white light proceeds from there, and lights all the way through the society. We are working together to make the world a better place. So, it basically means that your contributions and criticisms are required for the success of this quest for knowledge.

Copyright © Lenin Nair 2008


  1. Excellent post. You made me realize the significance of having a favicon in a blog as well. The code which you mentioned worked for me. But your favicon is brilliant and I know you thought before you had one for your blog indeed! Thanks a lot.

  2. Dear Bluetooth, good to know that you liked the post very much. Highly appreciated.


  3. Thank you for posting this! This is the third code I have tried and its the only one that worked. The instruction is clear except for one little element: When "title tag" was mentioned I was thrown off a bit till the line referred to was found in the general top area of the code.

    Interesting favicon. The meaning behind it really brings the graphic beyond just another piece of code. One question though: does the black represent a (I suppose one could insert needy here) society that needs enlightenment or was it just a handy background color?

  4. Jade thanks for the comment. The black was actually conceived as a handy bgcolor as you said. But yes, your interpretation is good.

  5. I believe I followed your instructions correctly, but I get this error:

    XML error message: The reference to entity "auth" must end with the ';' delimiter.

    Any suggestions? Thanks in advance

  6. Joe, it must be that you are doing something wrong, as there is no entity called 'auth' in Blogger. Revert back the changes, and start all over again. Follow each instruction very carefully, as very simple mistake of for instance, removing a semicolon can cause errors. Follow everything very carefully. If you get troubles, contact me with your full template code and I will let you know the issue.

  7. I am getting the same message as Joe. I used googlesites instead of google page creator (which no longer exists), but I've heard that works just the same. Did you ever figure out Joe's problem?

  8. @Young Cash Cow: Can you be more specific? Is it again 'auth' and requiring a ';'? Do you find any & character before 'auth'? If so, just try adding a ';' after it and see if it works. Many entities starting with & in Blogger require a semicolon to end them. If you contact me with your problem in detail, I would be able to help you out.

    Here is what you need to do:

    Place this code: <link href='favicon URL' rel='shortcut icon' type='image/x-icon'/>

    after <b:include data='blog' name='all-head-content'/> this code in Blogger (Edit html).

    Try and let me know.

  9. Thank you so much! I have been wondering for some time how to do this! Yours was the third or fourth tutorial I tried - and it actually worked! Again, thank you!

  10. I am also having the same problem as Joe and Young Cash Cow. The exact same error message appears, and I have tried adding a semi-colon in every place imaginable, but to no avail. I would love to hear feedback if anyone has any! Thanks!

  11. help!
    google page creator changed to
    Goolge Sites. I can't find the upload
    button! My other Favicon hosting site was hacked. What do I do?!!!!?

  12. hey!
    It worked!
    I used the code you suggested to
    Cow something and it worked!
    Thanks a billion!

  13. Hey thanks for the help! I also had difficulty using google sites with the code, but for anyone still confused, use the previously mentioned code, and then when you paste your image URL, google sites adds a lot of extra code onto the URL, so just delete everything past the .ico and it should work out fine - thanks again for the code.

  14. Thanks for this great tip on creating a favicon for Blogger blogs. I did it and it should work out fine. I used Dynamic Drive at and it may take a little time to show up. Again. Thanks a bunch.

  15. Hey,
    Thanks for the tutorial...
    Is it supposed to work in Google Chrome? My favicon is not appearing, although everything else ran smoothly. I'm going to try checking with IE tomorrow as I know it takes some time.


  16. Brennan's suggestion was perfect! Also.. My issue was .. not having a space between favicon.ico' AND rel='shortcut icon'. Check to see if that could be your issue. Thanks for the tutorial!

  17. This post is full of useful tips as well as techniques for bloggers and I am very much impressed with the theme and context and the efforts done in this regard are appreciated.


Post a Comment

Comments are moderated very strictly

Popular posts from this blog

What Is the Difference Between Hardcover and Paperback?

Today, my reader, Rahman contacted me with a doubt:

Dear Lenin, would you explain why there are two types of books: hardcover and paperback?
This is quite a simple affair and there are explanatory articles to be found at various places on the Net. Here is my addition.


A hardcover aka hardback is a book bound with thick protective cover, with usually a paper or leather dust jacket over the main cover. The aim of hardcover is protection and durability. These books are mainly for long-term use and collectors’ editions. Hardcover books last far longer than the corresponding paperbacks. They do not get damaged easily thus making them perfect for reference guides, great literary works, etc.

In addition, there is a difference in the type of paper used to print hardcover books. The paper used is long-lasting acid-free type. Acid-free paper has a pH value of 7 (neutral) which makes it highly durable. The papers are stitched and glued to the spine.

Hardbacks are prepared for commercial …

En Dash, Em Dash, and Hyphen

We have three types of dashes in use: The hyphen, En Dash, and the Em Dash. In this post, we will see how to use them all correctly.

Hyphen (-)

The hyphen is the minus key in Windows-based keyboards. This is a widely used punctuation mark. Hyphen should not be mistaken for a dash. Dash is different and has different function than a hyphen.

A hyphen is used to separate the words in a compound adjective, verb, or adverb. For instance:

The T-rex has a movement-based vision.
My blog is blogger-powered.
John’s idea was pooh-poohed.

The hyphen can be used generally for all kinds of wordbreaks.

En Dash (–)

En Dash gets its name from its length. It is one ‘N’ long (En is a typographical unit that is almost as wide as 'N'). En Dash is used to express a range of values or a distance:

People of age 55–80 are more prone to hypertension.
Delhi–Sidney flight was late by three hours.

In MS Word, you can put an En Dash either from the menu, clicking Insert->Symbol or by the key-combination, Ctrl + Num…

What Is the Meaning of the Word 'Ghajini'? Story and Trivia of Aamir Khan's New Film [Special]

[Special Entry]

Aamir Khan's latest film is titled a little weirdly for the taste of Hindi filmgoers. 'Ghajini': They have never heard of such a name, and such a word never existed in Hindi or in any other Indian language.

The name Ghajini is the name of the villain of the film. In Tamil version, the name of the villain was Laxman.

As a Tamil moviegoer, I have already watched Ghajini and know the story in full.

So, What Does the Title Mean?

In Tamil, the title of the film is inspired by the story of Mahmud of Ghazni, an ancient invader of India. This person was so persistent in invading India that he continued trying after several failures. In the film too, the protagonist is such persistent in finding out and killing the villain of the film, who had killed his girlfriend, Kalpana (played by Asin). Aamir's Character (named Sanjay Ramaswamy in Tamil), is a short-term amnesiac, who cannot remember anything more than fifteen minutes.

You may ask then how the Ghazni became…