Sunday, August 28, 2011

How to change FavIcon on a Blogger Website

So if you are the sort to pay attention to detail, you'll have noticed that I had the favicon on my blog changed:

As some people were asking me how I did it, here's a step-by-step guide. It'll be in three parts.
  1. Designing the 16×16 favicon, and saving it as favicon.ico
  2. Uploading it to a directory in your Blogger website
  3. Linking to the uploaded favicon and changing the Blogger favicon.

1. Designing

There are two approaches here. One is to draw the 16×16 favicon from scratch, pixel by pixel. The other would be to convert an image (a jpg file, for example) into a 16×16 favicon. I'll outline both approaches here.

The place to go for pixel-by-pixel favicon design is I had some fun on it, designing an icon based on the Chinese character for my surname:

The site is really good in that it gives you a near real-time preview of what you just drew:

Ultimately though, I decided to design my favicon from a picture. I recommend using this website: it's as simple as uploading any jpg file and pressing "generate favicon". For the picture, I used the picture I took during my 2004 Mount Kilimanjaro climb (my all-time favourite!):

The result looked like this: (I also pressed "download favicon" and saved a copy on my desktop.)

Although I was quite happy with the overall image, I wasn't too happy about its corners: I wanted rounded corners.

So I went back to, and uploaded the favicon to edit:

I was finally satisfied with what I designed. Now it was time to upload the favicon.

2. Uploading

For this, I started the "New Post" page on my Blogger. I needed to do this to access the menu bar:

By pressing the "Add Image" and uploading the favicon.ico, I saw the icon on my compose window. This next step is crucial: I right-clicked on the 16×16 favicon, and selected "copy image url". This is what I used in the next step to link to the uploaded favicon.

3. Linking

Using a text-editor, I crafted the following two lines of html code:

As you can probably guess, the "..." actually contains the url link to the uploaded favicon that I had saved to clipboard in the previous step.

Next: I added those lines to the website html code. Here's how. First, click "Edit HTML" under the "Design" tab:
On here, you'll see the template html code:

Scroll down quite a bit until you get to the end of the header section, demarcated by the line containing:

Important: copy and paste the above two html lines just before this line.

Press "save template", and voilĂ ! You have just successfully changed your Blogger favicon!

No comments: