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.
- Designing the 16×16 favicon, and saving it as favicon.ico
- Uploading it to a directory in your Blogger website
- Linking to the uploaded favicon and changing the Blogger favicon.
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 favicon.cc. 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 favicon.cc, and uploaded the favicon to edit:
I was finally satisfied with what I designed. Now it was time to upload the favicon.
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.
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!