Adsense

Monday, November 29, 2010

How to Change Blogger Icon

I know most of my readers are blogspotters too, as I visit many of your blogs. A few blogs I've visited have something really neat that sets your blog apart from the rest. It's a customized  icon / favicon. It's that little icon in the address bar and tab that comes right before the url or blog title. 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.

Recently, I had changed my tab icon of my blogger site. It used to be a common blogger icon which is an orange square with the white letter B inside it. I changed it into my custom made icon of two linking Cs similar to my banner. 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 Tinypic. Then, obtain the direct link to your image for the next step.

3. Add the underlined 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!

24 comments:

  1. omg tytyty i could not remember how to do this to save my life, i know on my server i just replace the fav icon.

    ReplyDelete
  2. I love you!

    A couple of notes:

    1. My template has
    < title>< data:blog.pageTitle/>< /title>
    before the pasted link (with no spaces after the less-thans).

    2. I usually host animated .gifs and so on on google docs. Loading it there the icon wasn't picked up by browsers not logged into my google account. I uploaded the .png to my picassa account instead and all looks well.

    (BTW, you may not have noticed, but your blog images are all held in a picassa account accessible from the "My Account" link on the dashboard.)

    ReplyDelete
  3. Yeah, I have my icon in .ico format and have it hosted on an external site.

    ReplyDelete
  4. That's awesome! I always wanted to do that. Thanks a bunch mate :3

    ReplyDelete
  5. fuck..im gonna try that. too bad i fuckin suck at everything when it comes to computers..well i guess u will know soon enough if i got it to work. lol

    ReplyDelete
  6. yeah couldnt figure it out...tried to save but wouldnt let me hahaha obviously i fucked something up.

    ReplyDelete
  7. i might try this if i find a good pic

    ReplyDelete
  8. Nice, I am going to work on this now. Seriously. Someone leave me a comment if you know a good icon for a blog called "Sloppy Drunk Rants"

    ReplyDelete
  9. this is VERY useful... i'm gonna try it out when i have time. thanks!

    ReplyDelete
  10. that's good to know, thanks for the tip

    ReplyDelete
  11. Ah, so that's how you do it. Thanks!

    ReplyDelete
  12. I was wondering why your icon had the CC up there... thanks for sharing!

    ReplyDelete
  13. Oh you mean the icon by the address bar?! I didn't know you could edit that with a free account! Thanks for the tutorial!!

    ReplyDelete