Being Different: Changing the Appearance of Your Blog! **

"God is in the Minor Details of things." Have you ever given a thought about this phrase? Why Steve Jobs is so finicky about the details and design about Apple Product? Even the inside of the Apple Products are a marvel of Aesthetic Design. 

When I started writing blogs (though I am 2 posts old). The first thing that struck my mind was How would I make my blog a little different from others? Though I know the content of the blog would be mostly mine, but what about the appearance of it. How can I make change it from the "Default Template"?

So searched via Google, things I could do to make my blog interesting. Found some basic widgets given by Blogger.com and also added a widget via Shelfari, My Book Shelf which you see below is from that site only. Even thought after making all the changes, which you see on this blog, it didn't satisfy me! The craving for doing a little more didn't go. 

The thing which attracted me was the "Tab Icon" (also know as Favicon), which you see the top of the blog tab. I thought of changing it and I was able to achieve it. Sharing the steps to achieve the same, so that you could also change it.

The following are the set of instruction which would help you achieve it:

Method 1 : 

1. Log on to draft.blogger.com (A new initiative from Blogger.com)

2. Then click on Design >> Page Elements tab, by clicking Edit on the new “Favicon” setting above the navbar element:

3. A new window will then open where you can select an image from your hard drive to replace the default favicon image. This initial launch only supports .ico files, but you can easily convert your JPEG, PNG, or other non-ico image file using your own image software. There are also many conversion tools online, and a quick Google Search brings up a handful of options.

4. Once you have selected the .ico file for your favicon, click Save. It would automatically resize the image to the correct dimensions, and you’ll then see the Page Elements updated with your selected favicon image:

5. When you save your template changes, you’ll see your newly-added favicon image displayed in your browser window or tab. 

Or 

Method 2: 

1. Make a .PNG file with Microsoft Paint or adobe or similar picture editor, dont forget it was 200 x 200 pixels in size.

2. Then upload your .PNG ico to website hat provide free service on converting .PNG files into .ICO files . like  www.degraeve.com/favicon/, www.favicon.cc

This site convert our .PNG into an .ICO of 128 x 128 pixels. Thenyou can saved the file using "save image as"

3. Then upload the converted .ico to any of he photo upload sites like Picasa, Photobucket, etc.

4. Now, the coding part. open 'Edit Html' on your blogger-layout section. (Take a backup of your template!)

5. Now search for "/title" or "data:blog.pageTitle" in the code. Could do a Ctrl + F.

6. Once found add the following code by updating the appropriate "Image URL" at the end of "".

7. Done. If the favicon doesn't appear wait for a sometime or clear your cache.

It's Done!!!By using either of the method the your own Custom FAVICON would start appearing with your blog. :)


Notice my customization: 

Source: Blogger in Draft,Rapid Template, Evaguide

**Note: These methods are only applicable for Blogs written via Blogger.