How to Change Blogger Icon

Blogger LogoMost bloggers (Blogspot users) are eager to uniquely customize the appearance of their blogs, and one of the small but significant customizations is changing the icon / favicon. This article will explain about how to change your blog icon, from the default Blogger icon to your own custom icon. I have used this method myself so I am sure it will work for you as well. Would you like to know more?

Recently, I had changed my tab icon of my blogger site. It used to be a common blogger icon which is an orange rectangle with the white letter B inside it. I changed it into my custom made icon of a sky blue rectangle with vertical I and Y (my initials), which also looks like a winking smiley. If you are interested in doing the same, here are the steps to do it:

1. Prepare an image, can be JPG or PNG format. I suggest PNG format because its size will be smaller by a 4:1 ratio. It means that a 10 Kb JPG image will be a 2.5 Kb in PNG format. Also make sure the size is small like 20 x 20 pixels or less, so the file will be smaller in size and won't make your blog loads slower.

If it's difficult for you to edit a small image, you can make a bigger one first, like 200 x 200 pixels or more, and after finish, you can skew it smaller. Microsoft Paint can do it for you easily.

2. Upload the image to an image hosting service, like the free PhotoBucket. Then, obtain the direct link to your image for the next step. You can use another image hosting service if you like, just remember to get the direct link.

3. Add this bold tags to your template. To access it, click "edit html" in "layout" section. Put them in head section, between "title" tag and "b:skin" tag. If you face difficulties in finding the tag, just use the find tool in your browser. In Mozilla Firefox, the shortcut is ctrl+f. If you use another browsers, apply with adaptation.

<title><data:blog.pagetitle>
<link href='put the direct URL of your image here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:skin>

Save and done! Visit your blog, open a few tab, and you should see your new icon there. It is very simple, so feel free to try it. Any question?

45 comments:

ThatsBlog.com said...

Thanks for your submission to the Thirty-Second edition of the Blog Carnival: Blogging. Your post has been accepted and its http://thatsblog.com/?p=194

-ThatsBlog.com

Anonymous said...

thanx it is very useful

The Malaysian Life said...

Hi, Ive not tried method 2. I'll try it and give you feedback. Thanks.

Alışveriş Cini said...

Thank you!!!!!!

Rocksterize said...

I put the code in, did everything, but it's not working :( It's still the stupid Blogger icon.

Isaac Yassar said...

@Rocksterize: I have just checked your blog and its page source, and the icon is a guitar or something. The codes are working I believe.

Valadis said...

Thanks it works!

Belle Chen said...

I might sound so silly...but what template that allow u to have the tab icon? Can you please tell me what template do you use here? Is it Blogger's standard template? Thanks!

Isaac Yassar said...

@Belle: Every template has Blogger icon by default, which usually appear in browsers tab bar (upper part). This article is to change it with our own icon.

Belle Chen said...

Hi
I really clueless now. I don't see any tab icon. Please check your twitter. I tweet you and attach the picture of my screen. I don't see any blogger tab icon (i.e. yours is Home/About/Archive/Consult/Contact).

Please suggest...
Thanks

Isaac Yassar said...

@Belle: Tab icon is the same as regular icon, by Blogger default it is an orange rectangle with white B inside it. Mine is a blue box with smiley-like style. Not the home, about, etc.

360Jewels said...

lol Sorry about misunderstanding of the term.

So if how do I make those 'menu bar?'(i.e. yours is Home/About/Archive/Consult/Contact) in my blog? I like it coz it makes it easy for people to navigate on my blog.

Isaac Yassar said...

@360Jewels: I did it through layout >> edit HTML, not too hard if you know HTML programming. Principally, I just add some links there.

Manish Ahuja said...

Hey Isaac,

That's a really helpful and effective tip and your easy instructions make it a complete cakewalk. Worked absolutely perfectly for my blog. Will surely return soon to keep checking updates.

Manish :)

360Jewels said...

Will you please let me know the position of the HTML and show me your html code for your Home/About/Archive/Consult/Contact so that I can follow?

Please! Please! Thanks! ^^

Ej said...

very easy as u included links! thanks heaps!

ABOUT ME said...

I followed all steps (I think) but icon is not showing, what am I not doing? http://photographybymarthablog.blogspot.com/

Isaac Yassar said...

@About Me: Your icon is showing, but you are currently using default Blogger icon as your icon. That's why it looks the same. You have to prepare your own icon to view the difference.

Belle Chen said...

Hi, Just to let you know that I finally tried this trick. It worked well.

P.S. I like the new look of your site. It looks more modern and clean!

Anonymous said...

works perfect! and so simple, thank you.

xc said...

thx!
it finally works!

FiFFy_MeCina said...

Wahaha...
Finally, i did it...
thank you for your sharing...
=)

B Wayland said...

Doesn't appear to be working? Still looks like the stupid blogger icon.

Anonymous said...

thanks for the tut, it's working :D

Isaac Yassar said...

It's all my pleasure. Glad to help!

Fernando Montano said...

Thank you, great instructions, worked perfectly.

Helena Gołdon said...

Does it take time to upload?
Cause I have been waiting for some minutes and nothing's happening.

Great blog, btw!

Helena Goldon

helenagoldon.blogspot.com

Isaac Yassar said...

@Helena: Of course not, small icon is very fast to upload. What image hosting did you use?

vk said...

Easy peezy, Japaneezy!

Thanks a ton :)

ote tatsuya said...

this is what i'm looking for..thanks for the tutorial

Isaac Yassar said...

You're welcome fellas! Always a pleasure :)

Teachinfourth said...

Thanks! Very straightforward and easy to follow!

Anonymous said...

Thanks its working, want to know whether changing the icon is right or wrong as per bloger toc

Isaac Yassar said...

As far as I know, the TOS doesn't mention anything about it.

P.S. said...

16x16 it's the optimum size
check out http://la-patrat.blogspot.com/
thanks for the advice.

Carla Mendoza said...

Yay! Thanks for this :)

Mariana said...

THANKS SO MUCH IT REALLY HELPS!! :DD

almwso3a said...

Thank you

K.K said...
This comment has been removed by the author.
skmania said...

thanks very help full

Mick said...

Wow thanks for the help! You ROCK!

znt said...

thanks a lots .. working great :)

Pinkflowers said...

Tx a LOTT ^^

wm said...

thankyu! after so many tips, your works like a charm! thanks for sharing.

Readers Lab said...

thanks a lot....