How to Change your Blogger Favicon

By Luke

A Favicon is a custom icon for your blog displayed next to the URL’s of your sites and next to the page title in open tabs.

By default in blogger blogs, all the icons are set to Blogger’s favicon:

By performing the following steps you can replace the Favicon with your own.

Select an icon of your own, you can get quite a bit of professional free favicons at Favicons R Us or you can create your own Favicon at favicon.cc. (Refer below for type of icon.)

Next you’ll need to host the icon on a website. If your blog is on a custom domain you can upload your icon there or you can upload it on a free service, preferably on Google’s free web hosting service. Once you’ve uploaded the icon you can move to step 3. [Lets call the full URL of the icon you have uploaded ‘FaviconURL’]

Now log in to your Blogger control panel, go to the layout panel of the blog you want to customize. Select ‘Edit HTML’.

Look for the “<title><data:blog.pageTitle/></title>” code (it’s somewhere on the top, if you can’t find it select ‘Ctrl + F’ and search for it.)

Once you’ve found the location right after it paste the following code:

<link href=’FaviconURL’ rel=’shortcut icon’ type=’image/x-icon’/>

Icon Details

The icon should be preferably square – 16×16, 32×32, or 64×64, bigger sizes are supported but you wouldn’t want most of your webpage’s file size to be because of your Favicon. It would be best if you limit the file size of the Favicon to less than 15k.

You can get a more detailed description of how to change your Favicon here.

People who read this post also read:

How to Change your WordPress Favicon

How to remove your New Blogger Navigation Bar

Blogger to WordPress Part 2 – Feeds, Re-directs & Permalinks

Blogger to WordPress Part 3 – Plug-ins to get you started

Display HTML in Blogger Posts

Did you like this article?

Please Share This Article:

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/digg_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/reddit_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/stumbleupon_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/delicious_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/technorati_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/google_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/facebook_48.png

http://www.computer-realm.net/wp-content/plugins/sociofluid/images/twitter_48.png

Subscribe for future updates for free by RSS or Email

About The Author

Luke is a Software Developer and the main writer behind Computer Realm.

27 Comments so far

Computer Realm | How to change your Wordpress Favicon February 26, 2008 4:41 am

[...] recently wrote a post on how to change your Blogger Favicon so it’s only fair that I write a post on how to do the same on the WordPress [...]
Cool May 17, 2008 10:45 am

Instead of designing your own favicon, you can also convert a picture into favicon using the following website:

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

Cool’s last blog post..Cool Free Software For XP and Vista

Reply
luq reply on May 17th, 2008 2:28 pm:
thanks for the resource..it’ll surely help some of the readers here..thanks for commenting too!

Reply
Computer May 30, 2008 12:02 pm

Great tip. I was looking for this and found this post from a google search. Thanks again.

Reply
LuiZ September 23, 2008 4:54 am

Both codes??
Example:

right?

LuiZ’s last blog post..Você é Mau? Descubra!

Reply
Dewaji SEO Test reply on January 4th, 2009 4:10 pm:
Luiz ; you can choose one of that code. Do not use both (IMO)

Dewaji SEO Test’s last blog post..Busby SEO Test

Reply
lanTot January 11, 2009 2:24 pm

Thanks for this i’ve been looking for this for a long time

Reply
seo test expert January 23, 2009 10:59 pm

yep, that’s the simplest tip. thank you.

seo test expert’s last blog post..Big Change In The last Eight Days

Reply
beloed January 25, 2009 10:54 am

Oke I’m done change the Favicon. thanks.

beloed’s last blog post..Busby SEO Test – It’s Time To Change

Reply
jonzie February 2, 2009 7:27 pm

it doesn’t seem to work for Google Chrome

jonzie’s last blog post..Communication technologies, I’z duin it rite.

Reply
iPhone February 11, 2009 6:48 pm

Thanks I wanted to change my sites favicon for some time now

Reply
discount Sunglasses February 25, 2009 5:37 pm

I find inconsistencies on blogger’s favicon code. The url linking does not work anymore. I wonder whether Blogger frowns the idea of changing the favicon.

discount Sunglasses’s last blog post..How to find affordable sunglass displays

Reply
Designer Sunglasses March 28, 2009 3:51 pm

Thanks for the tip. i was really eager to change the default favicon.

Reply
Isan Hazuan May 9, 2009 3:22 pm

Man… I was unable to do it!!!!!!
It says….

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “link” must be terminated by the matching end-tag “”.

Reply
Computer Repair May 16, 2009 11:12 am

Thanks for sharing your informative blog….good tips

Reply
alex December 29, 2009 10:01 pm

i tried changing my favicon, but it didn’t work. Please help me out

Reply
Tarun February 1, 2010 4:42 pm

very kool

Thanks a lot the steps really helped me out!

Thankzzzzzzzzzzzzzzz alot

Reply
Jignesh June 6, 2010 3:03 am

great post

Helped me alot

Thanks

Reply
Christian July 28, 2010 1:19 pm

I tried but there was problem with code being accepted… so I found different instructions here: http://findhow.blogspot.com/2007/10/tutorial-how-to-change-your-blogger.html , and .png can be used without converting to icon (the right size – I used 20×20), plus .png can be uploaded pretty much anywhere.

Reply
5 Ways to Make Your Blogger Blog Look Better | Diary of A Mad Freelancer September 14, 2010 10:54 pm

[...] your image and grab the HTML code. Insert that code in our blog template header section. Check out this if you have [...]
MAZe September 27, 2010 10:41 am

Didn’t work for me. I got a parsing error when editing Blogger’s HTML.
Are you sure it works? You don’t have a favicon on your site

Reply
TMFKSOFT February 1, 2011 12:03 am

Try using this:

Notice the
Blogger moans if you don specify a close tag.

Reply
Eric March 5, 2011 5:02 am

Hello, great article! I’ve already changed my favicon for the search bar but when I reply to a comment somebody leaves on my page it still displays the Blogger favicon. For instance if you leave a comment saying “Hello” and I reply to your comment, it shows B Admin. said…, hope you follow. Check out my site to see what I mean, any help for this? Thanks, Eric

Reply
Geeth reply on March 23rd, 2011 3:48 pm:
for that you should change your blogger profile picture

Reply
rusl March 8, 2011 11:02 am

I couldn’t get this to work for me. Does it still work? Also, I’m using the old Blogger template not the newer “Layout Style” so I don’t know where the problem is.

Reply
Justin April 11, 2011 6:54 pm

Thanks for sharing this one

Reply
say May 23, 2011 12:33 pm

thanks for this! it worked for me GOD bless

Reply