Blogspot Blogging Basics Tutorial 2 – Setting Up Your Blogspot Favicon

What is “Favicon”?

“Favicon” is the short form for “Favorite Icon”. It is the little image (16 x 16 or 32 x 32 pixels) you see beside the URL in the web address bar of your web browser, and if you open a few browser tabs, it appears next to the web title and description as well. If you are still clueless as to what I am talking about, look below, the favicons are cirled in bright orange. =)

Why is there a need for a “favicon”?

We are using blogger.com as our blogging platform, and the blogger favicon ‘B’ is used by over a million bloggers. How unique is that? Creating a unique favicon will simply make one’s blog more unique. Images are known to capture people’s attention more easily. Hence, a well-designed favicon serves the function of allowing readers to remember our blogs by, or relate to our blogs easily.

Isn’t it too early to get my favicon up?

It’s only lesson two and we haven’t even talked about blog template, layout and title, among other important stuff. Why talk about setting up a favicon first? The reason is simple. It is more fun that way! I wanted readers to join in the fun and design their own favicons. I hope you are enjoying yourself already.

Getting started

Setting up your favicon isn’t all that difficult. All we need is to first arm ourselves with a 16 x 16 or 32 x 32 pixels windows icon (*.ico format). How can we do that? Use any platform to design a simple image (Powerpoint, Photobie, GIMP, Photoshop, Paint etc) and don’t worry about getting the image size right. The only thing you need to take note is to save your image in *.bmp, *.jpg or *.png format. So, here I have, a BCube to represent Blogspot Blogging Basics. =)

Note: If you intend to convert your favicon image to *.ico format, you need not worry about image size. The image converter should convert your image to 16 x 16 or 32 x 32 pixels based on the settings.

Converting between image formats** (skip this step if you prefer to use *.png or *.gif formats)

After getting your design up, you need to access my resources page and look for Imagicon. Download the latest version. It is pretty straightforward (drag and drop) to use Imagicon to convert your saved image to *.ico format, hence I shall not explain. If you have been following my Photobie lessons, you can import your image into Photobie and save the output in *.ico format as well. Else, you can always search for another image converter that is to your liking.

Uploading favicon and obtaining the link

If you are using *.png or *.gif image formats, ensure your images are correctly sized (16 x 16 or 32 x 32 pixels). Else, once you have your image in *ico format, the next step is to upload your favicon to a free image host. I personally recommend Picasa web albums. Else, google “free image host” and you can pick any free host you like. Once you have set up an account, you can start creating a new album and uploading your favicon. There is only one thing to highlight when using Picasa. Once you click on your image, you should see a screen similar to what I have below. To obtain the link to your favicon, click on “Link to This Photo” as circled.

Adding favicon to Blogspot

Finally, we are nearly there! Log in to blogspot, go to “Layout”, “Edit HTML”, as shown below:

Before we proceed any further, you may want to backup a copy of the template (by clicking on “Download Full Template”). This is a good practice, and in case you mess up the codes, you have something to fall back on. At this point, I would also like to highlight something really important. Please note that I have “commented” the codes below (by adding /* */) to ensure that you would see them as they are in your “Edit HTML tab” (just a precaution). If you are not sure what I mean, no worries. Read carefully and copy the right codes. Copy the code below (in red only, omit the /* */ please) and ensure that you have replaced “your favicon link” (in red, bold) with the link you obtained in the previous step.

/* <link href=‘your favicon link’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/> */

If you are using other image formats (*.png or *.gif), you may copy the respective codes below and replace “your favicon link” with your image URL.

/* <link href=‘your favicon link’ rel=’shortcut icon’ type=’image/png’/> */

/* <link href=‘your favicon link’ rel=’shortcut icon’ type=’image/gif’/> */

You should see the following line of code (in red) somewhere near the top of “Edit HTML” tab:

/* <title><data:blog.pageTitle/></title> */

Paste your line of code immediately below this line. At the bottom of the page and click on “Save Template”.

Done. Refresh your page a couple of times (usually) and you should see your personalised favicon. It may take a little time for your favicon to load, so relax if you do not see yours immediately. Simply refresh your page a couple of times more.

End of blogspot blogging basics tutorial 2

Yup, that sums up our tutorial on “how to install a favicon on blogspot”. You may view my favicon if you assess my blogspot URL here. I hope you have fun exploring blogspot.