How to add a Favicon to your Blogger blog

by VISHAL on August 8, 2008 · Blogging

  • Share
I am posting step by step procedure of adding favicon to blogger/blogspot. Just follow the simple steps. thats it.Today I will show how to add a favicon to a blogspot blog without using any plug-in.To add a favicon you need to have a favicon and there are plenty of ways to create a favicon.


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.


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

For uploading .ico image you can use following services.

A. Fileden

B.Google Pages

3. 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 between <head> and </head> tags.

<link href=’Your Icon URL’ rel=’shortcut icon’/>
<link href=’Your Icon URL’ rel=’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.

Don’t forget to drop your comments if you like my post.

Related Posts

Article by VISHAL GAIKAR

I am Vishal Gaikar, Engineer, Web Addicted, Living in Maharastra, India. Email Me @ vishal@techbucket.org

VISHAL has written 533 awesome articles. If you like This post, you can follow us on Twitter.. . Subscribe to feed via RSS

{ 9 comments… read them below or add one }

1 Sudam September 13, 2008 at 2:49 PM

Well written posts and i was just trying to change the favicon but had no idea. Very soon i will change my favicon. Thanks

2 √ЇšĦДĽ September 14, 2008 at 5:37 AM

@ Sudam

U R Welcome dear ;-)

3 Peter October 7, 2008 at 6:19 PM

Maybe there is something I do not get, but where in the blogger template do I load this code? Anywhere?

4 √ДMPIRE October 8, 2008 at 12:43 AM

@ Peter

Put the code in between Head Tags :-)

5 Sudam January 23, 2009 at 4:43 PM

Hey i have uploaded the icon image to the gpc and put the code snippet right after head. But regrettably the icon is not working and the default B greets. Can you please guide and suggest?

thanks in advance

6 √ДMPIRE January 24, 2009 at 9:27 AM

Try to upload ico image on Fileden

and let me know :)

7 Sudam January 24, 2009 at 9:37 AM

I have an account in fileden and just uploading the same right now. I had seen yours is uploaded there. thanks

8 Lee February 28, 2009 at 4:34 PM

Thanks for the tip! It works great at oneadaydeal.blogspot.com

9 Rats September 20, 2009 at 4:40 AM

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.

is the error what should i do

Leave a Comment

CommentLuv badge