How to Change your Blogger Favicon

By Luqmaan

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:

Computer Realm on Facebook

Please Share The Post If You Liked It:

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

You might also want to:

Discuss this in the Computer Realm Forums new!

Subscribe for future updates for free by RSS or Email

Follow me on Twitter

Leave a comment below and get CommentLuv

Found a typo, dead link or dead image above? Please leave a comment or contact me.

About The Author

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

Latest Forum Posts

17 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