How to Change your Blogger Icon

How to Change or Customize your Blogger Icon

Every time you create a Blogger account, the default icon will be Blogger's icon  (this one on the right).  And I believe most bloggers like me would want to change it.  My primary reasons is to have a unique identity logo or identity icon for my blog even if its a sub-hosted by Blogger.

Noticed the icon that appears in the tab of your browser?  Yeah, the blue colored "J" ! That is my customized identity icon.  And I made it myself!  I'm not a Pro graphics designer.  You don't have to be either.  Anybody can make it actually.

Here's how:

1. Prepare an image that you would consider to be your identity icon / logo.  

This can be any photo or picture file in media format such as JPG or PNG format. As a matter of fact, any picture that you like can be used as you icon or logo.  But of course, the size of the picture matters a lot.  Others suggested to use the PNG format as its size is smaller.  But I simply used the JPG format.

If you don't have one yet, just make one.  Fastest way is to go to MS Paint and draw something you'd like to take.  

Take mine for example:  my blog is entitled JACK, therefore I opted use a big "J" icon logo.  I opened MS Paint, click on the Text Toolbar, and typed letter J.  I had the font size changed to 50, and then filled the letter with blue color.  I wanted to emphasize the "J" so I put it in the top left most corner of the Paint canvass.  Then I resized the Paint canvass to squeeze fit my icon logo.   Save as JPG file and close.

As much as possible, see to it that the file size of the icon logo you have just made is not more than 10kb.  If you could reduce it to 5kb, that would be great!  Technically, the smaller the file size, the better.This is because bigger icon logo file size might slow down the loading of your blog page.

2. Upload the image to a media hosting or a photo sharing website.

You must upload the JPG file to an image hosting website.  Examples of these websites are ImagShack, PhotoBucket, Flickr, Zoomr, etc.  Any of these websites will do.  The most important thing is you copy the direct link to your image from where you had it hosted.

3. Add this bold tags to your template.

<title><data:blog.pagetitle>

<link href='put the direct URL of your image here'
rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<b:skin>

Here's how you add the above tag into you template.  Login into your blogger account.  Click on "Design" tab, then click on "Edit HTML".  Find the tag "<data:blog.pagetitle>".  Press Ctrl+F to make it faster.  Then paste the above highlighted code in the same place as displayed above. Copy the direct link from which you have hosted your identity icon and paste it in place of the red colored text. The save your template.  You're done.

Now, visit your blog and try to open a few tabs.  Did you see your very own icon logo in the browser tab?  You have a Blogger blog but you icon is unique to you.  Fantastic!