While
it is very easy to add a favicon into self-hosted blogs, it is not so
in case of free hosts like Blogspot blogs. The procedure is entirely
different. In Blogger, you have access only to the blog layout and no
file upload features. In this case, adding a favicon to your Blogspot
blog requires a workaround. Here is the step-by-step procedure for that.
- Create Your Own Favicon
The
first step of adding the favicon is creating your own unique favicon
file. The favicon is a very small icon file with ‘.ico’ extension. Use
one of these online services to create your favicon:
You can either upload an image file (in JPG, PNG, or GIF) and get it converted to a favicon or draw your own favicon.
My favicon was drawn, with a clear concept (see below) with the service from:
I loved their paintbrush interface to draw colors into the square columns.
- Upload the Icon File
-
Once
you have your favicon ready, upload it to a web location, from where it
can be accessed by Blogger. Remember, icon file is a small image file
with ‘.ico’ extension. But, it cannot be uploaded to Flickr as an image.
It is worthless to upload to Rapidshare or any such file sharing
systems. So, what I did was create a free webpage with Googlepages, and upload the file there.
For that, you have to sign up in Googlepages and create a free web space there (here is my site: lenxworld.googlepages.com).
In this account, you have the privilege to upload any sort of files as
in self-hosted blogs. Here is the screenshot of the file upload feature.
- Add This Script to Your Blog
As
the third step, in your Blogger profile, go to layout and click ‘Edit
HTML’. Then, just add the following code after your code’s title tag:
<link href='Your Icon URL' rel='shortcut icon'type='image/vnd.microsoft.icon'/>
On adding this script, please replace the Your Icon URL with the correct URL of your favicon.
Once you have this script ready, save the template and check the website, your favicon should be loading fine.
I
tested my site with Mozilla Firefox, Internet Explorer, and Opera. In
all, the favicon is showing just fine. In case of IE, the favicon load
time (for CuteWriting) is rather long, but it is only a special case. In
case of IE engine loaded within Firefox, the favicon doesn’t work for
any website.
About My Favicon
As
you see, my favicon consists of four colors on a black background. It
is meant as a symbol of cooperation to spread the light of knowledge.
Materialistically, it is the confluence of the basic colors, blue,
green, and red to form white.
Now
let’s get to its envisioned meaning. Blue emanating from the bottom
represents my this blog, CuteWriting. It is a contribution to the good
of the society. The green from the side is the general acceptance to the
blog—my readers who support me. The red from above is the healthy
criticism I receive (intended to be coming against blue). All these
three colors congregate to form the white line, which is the bright
light of wisdom and knowledge.
