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:

http://www.favicon.cc/

http://www.rw-designer.com/online_icon_maker.php

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/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:

http://www.degraeve.com/favicon/

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: lenxworld.googlepages.com). 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'
type='image/vnd.microsoft.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

17 Opinions:

  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.

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

    Lenin

    ReplyDelete
  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?

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

    ReplyDelete
  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
    joe

    ReplyDelete
  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.
    Thanks
    Lenin

    ReplyDelete
  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?

    ReplyDelete
  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.

    ReplyDelete
  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!

    ReplyDelete
  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!

    ReplyDelete
  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?!!!!?

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

    ReplyDelete
  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.

    ReplyDelete
  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 http://tools.dynamicdrive.com/favicon/ and it may take a little time to show up. Again. Thanks a bunch.

    ReplyDelete
  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.

    x

    ReplyDelete
  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!

    ReplyDelete
  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.

    ReplyDelete

Comments are moderated very strictly