How to add a Favicon to Blogger Blogs

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Blogger blogs have a default Blogger favicon and this is to show that the blog is using blogger platform.
But some blogger users want to brand their websites by adding their own custom logos and favicon.

In this post i will explain to you how you can add a favicon to your blogger blog and how simple it is.

What exactly is a Favicon?

A favicon stands for favorites icon, also known as a website icon, shortcut icon, url icon, or bookmark icon. It is a 16×16 pixel square icon associated with a particular website or webpage. Browsers that provide favicon support typically display a page’s favicon in the browser’s Address bar and next to the page’s name in a list of bookmarks.

Usually favicon has the extension .ico but Mozilla Firefox browser has added further support for favicons. So your favicons can have either of the following extensions .ico .png or .gif.

In order to add your favicon you should follow these steps:

Step I : Creating your own favicon

Favicons can be created by Image Manipulation softwares such as Photoshop and Gimp and just by selecting the dimensions to be 16 x 16.

For those who don’t have any knowledge about these softwares can convert their images to favicons by using these free services:

Favicongenerator.com
favicon.cc
Online fav-icon creator
FavIcon Generator
FavIcon from Pics
Genfavicon

Alternatively you can select a favicon from the image galleries provided by the following sites:

20 Free Favicon Icon Sets
free favicon
Favicons R Us
Free Favicons

You can upload your favicon on blogger by uploading it on any post and retrieving the link of the image or you can directly upload it on your picasa web albums.

Another option is to upload the image on google sites. Uploading on these websites is beneficial because they are hosted by google and therefore are more reliable.

Step II: Adding the image link to your blogger template

1. Go to Layout->Edit Html
2. Download Full Template (This is to backup your template)
3. Check the Expand Widget Templates
4. Search for the following code

</head>

5. Just above the code place the following code:

<link href=’Favicon-image-url‘ rel=’shortcut icon’/>
<link href=’Favicon-image-url‘ rel=’icon’/>

#Update
The above code was not working on internet explorer and google chrome. So i have updated the code. The new code will work on all the three major browsers.

Updated Code:

<link href=’Your-Favicon-Image-Url’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>

6. Replace Favicon-Image-Url by the link of the image.
7. Save the Template and you’re done.

Facing problems. Tell me!!

Tags: blogger tutorial

About Gautam

Gautam Hans is a passionate blogger. He is the owner of the Blog Godown. He is a social media enthusiast and loves to write about internet and technology. Follow him on Twitter

This entry was posted by Gautam on July 2, 2009 at 11:45 am, and is filled under blogger. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.

Related posts:

Related Posts
Comments (22)

#1 written by Tanuj Lakhina
July 3, 2009 - 12:09 am

Reply Quote

Am not really sure if you can host the *.ico file on any image hosting site.I've not tried on Picasa but some other hosts I did try when trying to create my own favicon and I ended up using Fileden.com , works there. Although you have to login there every month to keep your account working and files to stay.Mine was recently deleted.
#2 written by gautam
July 3, 2009 - 12:36 pm

Reply Quote

You can try google sites : sites.google.com it is reliable and from google
#3 written by iWrite2Know
July 3, 2009 - 1:18 pm

Reply Quote

WOW! Favicon should be a great way to brand a blog
#4 written by Tanuj Lakhina
July 3, 2009 - 1:24 pm

Reply Quote

Oh think thats a better option than crappy fileden!
#5 written by Ankur Patel
July 3, 2009 - 11:22 pm

Reply Quote

ThanX for accepting request

but it works onlyy in firefox….safari, opera, ie, chrome dosnt work…any solution?

and besides that i have one more confusion…check this screenshot and help me to figure out, http://k88.sl.pt

in what area do i need to change pixel number in order to expan width of body?

hope to hear from u soon…and thanx in advance
#6 written by Tycoon Blogger
July 4, 2009 - 4:47 am

Reply Quote

Your favicon look really good. This is something I have to get around to doing for my blog. On a side note, I tagged you on my blog for a "blogger chain" Take a look when you get a chance..
#7 written by gautam
July 5, 2009 - 7:35 am

Reply Quote

@Ankur Patel
Use .ico format for favicon it works everywhere(it is a standard).
And about your template. It might be probably the main wrapper but you can experiment yourself
#8 written by Ankur Patel
July 5, 2009 - 8:24 pm

Reply Quote

@gautam

no, it works only in firefox even we use .ico format

evenfor your site favicon works only in firefox. i check your site in opera and safari, it saws blogger icon not bloggodown.com icon
#9 written by gautam
July 8, 2009 - 5:16 pm

Reply Quote

@Ankur Patel: i am having no problems with it. it is working on internet explorer and firefox
#10 written by dhurianne
July 11, 2009 - 7:51 pm

Reply Quote

Thanks so much for this. I have now because of this share. U can check mine too.
#11 written by Jason
July 14, 2009 - 6:41 am

Reply Quote

This really helped. Thanks,
#12 written by Nerdote
July 27, 2009 - 10:26 am

Reply Quote

whats up!? hey thanks 4 the tutorial!!

But my favicon is acting all weird. My blog is http://www.arrozconpinga.blogspot.com and i can see it there if i'm using internet explorer, but not if i'm on firefox. Weird. any help??

Also, even on internet explorer, if i access my blog through http://www.arrozconpinga.com (recently purchased the domain on godaddy and i redirected it), i do not see the favicon.

Any ideas, suggestions, questions??

Thanks.
#13 written by Nerdote
July 27, 2009 - 6:22 pm

Reply Quote

hey just made the update you suggested. Same problem.

Thanks

&

sorry!
#14 written by Ankur Patel
August 4, 2009 - 5:51 am

Reply Quote

ThanX for update

it works for me in Firefox, Internet Expoler & in Google Chrome

it still doesn't work on Opera & Safari

but still thanx for sharing
#15 written by gautam
August 4, 2009 - 4:14 pm

Reply Quote

@Ankur patel will see if it can fixed for Opera and Safari
#16 written by Mary, Author and Publisher
August 22, 2009 - 12:19 am

Reply Quote

This doesn't work for me. Could you help?
#17 written by gautam
August 24, 2009 - 12:16 am

Reply Quote

@Mary: could you cite the problem you are having, i would like to know what type of problem are you facing.
#18 written by The Persimmon Perch
September 7, 2009 - 11:31 am

Reply Quote

Thanks it worked great!
#19 written by Mysticle
October 15, 2009 - 12:46 am

Reply Quote

I've just noticed that the favicons on all of my sites are not working. This must have occurred in the last few days. I created the favicon and hosted on Ripway. I have the code incorporated into the template. Has been working fine, until recently. Any ideas?

I use Firefox, always. Did an update a several days ago. Could that be the issue?

Multiple sites: 2 different favicons

http://mysticle.blogspot.com/

http://rickbischoff.blogspot.com/

Thanks!

Recent blog:=- Water and Consciousness
#20 written by gautam
October 15, 2009 - 1:13 am

Reply Quote

Possible reasons maybe:
1. your hosted image is not showing because of ripway
2. you have removed the code of favicon

There may be many reasons but in my opinion first host the image in say sites.google.com

Recent blog:=- 36 Quality Tweeps to Follow
#21 written by Tim
November 9, 2009 - 8:53 pm

Reply Quote

I had so many problems trying to get my favicon to show up in Blogspot using Chrome. Until that is I found your page. Phew! You've saved me a huge headache.
Thanks very much for you work.
#22 written by Sushant @ techooze
December 22, 2009 - 5:05 pm

Reply Quote

I got onebut its kinda blurred
Sushant @ techooze´s last blog ..Audi Avatar, Another Audi Concept Supercar

No trackbacks yet.

How to add a Backtype retweet button to Blogger

October 1, 2009 - 5:43 pm

Posted in blogger | 10 comments

Backtype is a service which tracks comments made by people on blogs and websites. Backtype also tracks tweets via Backtweets.
Like Tweetmeme, Backtype also has a retweet button for websites.

Backtype Retweet Button

Backtype button has the following advantages over tweetmeme:
1. The design is customizable (You can easily change the color and border of the button).
2. Backtype tracks [...]

Backing Up your Blogger Posts and Comments

June 24, 2009 - 6:37 pm

Posted in blogger | 5 comments

One day you are editing your previous post and you unintentionally pressed the delete button. Now what? You lost your content and there is no way to retrieve it, but what if you had a backup of all the posts and comments? Then you have nothing to worry. Even if you lose any data, [...]

Google Friend Connect Recommedations Gadget For Blogger

June 15, 2009 - 8:37 pm

Posted in blogger | 8 comments

Google Friend has brought with it a great of set of widgets to interact with your followers as well as get feedback from them. The recommendations gadget is one gadget to get feedback from followers much like ‘reactions’ in blogger and others like ‘thumbs up’. Followers can recommend posts they like by clicking on the [...]

Add Blogger Blog to Google Webmaster Tools

June 10, 2009 - 7:03 pm

Posted in blogger, seo | 5 comments

Nobody can deny that Google is the best search engine. As google is used by most users so it is a great way to get new visitors to your blog.Adding your site to google webmaster tools increases your blog’s visibility in search engines which means more traffic.
Here’s how you can add your blog to [...]

How To Add a Search Box to Blogger Blog

June 4, 2009 - 10:27 am

Posted in blogger | 1 comment

Adding a search box to blogger cannot be simpler than this: Blogger had a developed a Search Box Gadget which was earlier available only in Blogger In Draft but it has now been released in Blogger. Now you can add a search box in minutes and the results will be displayed inline in the blog.
Here’s [...]

How to speed up your blog

April 21, 2009 - 1:06 am

Posted in blogger | 2 comments

Why is your site slow?
Major reason behind the site being slow is the page size. Obviously,if your site contains large chunks of data, it will take finite time to load each and every part of it. I have seen many amateur bloggers adding pictures,videos and gadgets in large numbers. They think they are adding content [...]

Removing Navbar From Blogger

April 10, 2009 - 10:16 am

Posted in blogger | No comments

Navbar is a small toolbar provided by blogger.com which is placed at the the top of your blogger blog. It looks like this:

Blogger Navbar
Some people would like to remove this toolbar because it may not look good or may not match with the template.Here’s how you can remove the navbar:1. Go to Layout->Edit Html2. Download [...]

How to add Adsense or any other Ad code in various places in Blogger blog

March 31, 2009 - 11:10 am

Posted in blogger | 3 comments

Adsense as well as any other ad codes can be added in various positions in the blog and some positions may bring more revenue than others and it totally depends on your content and its layout.These ad codes are usually javascript codes.
The various positions where Adsense and ad codes can be added are:
Sidebar:1. Go to [...]