Tuesday, May 13, 2008

Give Your Blog A Favicon!

I choosed our Earth as the little icon that appears next to my blog address. I wanted to reflect that Tekkaus is not just about personal touches, but rather every single thing on our Mother Earth! Everything that revolves around her deserve my undivided attention. The Blue Earth that you see is quite simple, but it bears meaningful message (at least to me).

Yay! Tekkaus has a Favicon too!

So do you guys ever wonder how you can have your very favourite little icon to appear next to your blog address? This icon is known as Favicon. So what is favicon? Simply put Favicons are "Favourite Icons". It's not necessary but it could double up as your identity and eye-candy. Creating a Favicon is (almost) as easy as 1-2-3! Actually it's not that easy, but it's not that hard too. Here's how we can make your very own Favicon from scratch.

1-Create Your Favicon
2-Upload Your Favicon
3-Update Your Favicon

1-Create Your Favicon
First thing first you'll need to have an icon which you would like to use to represent your identity or your blog. It's better if you could make your own so that it's unique. You can create your icon using any image editor such as Photoshop. After creating your very own image, you'll need to convert it into the .ico format. One useful tool is Imagicon. It's more preferable if your icon is in 16x16 or 32x32 size.

If you do not have any image editing software or simply don't want all the hassle involve, just create the icon online. Try Dynamic Drive. As for me, I simply downloaded mine from Icon Archive and then edited it using Microsoft Photo Manager.

2-Upload Your Favicon
Well, here's the hard part. It would be more ideal if you could save your Favicon in the root directory of your blog site. This is not a problem if you host your own domain. But those of your who uses the free Blogger, you'll get a big no-no. Two NOs for Blogger: One, if you upload an icon image, Blogger will reject it; Two, any files that is uploaded will no go into blogger root directory.

Nope, don't worry. It's not the end of the day for your Favicon. Here's where Google's Page Creator can help. You can use your GMail account to log in. In short: Google Page Creator lets you create web pages in your very own browser and publish them to the web with just one single click. The pages you have created are hosted on Google servers and your own page will be at http://yourname.googlepages.com.

Okay! Here's the real deal. We will use Page Creator to upload your Favicon. On the right of the screen, you should see this:

Click the “upload” link and browse your computer for the Favicon that you want to upload.

Once your Favicon had been uploaded, take note of the URL of your Favicon. The directory of you Favicon will probably look like this: http://yourname.googlepages.com/iconname.ico. Where "yourname" is your Gmail user account and "iconname" is your Favicon name. Copy this URL!

3-Update Your Favicon
Here's the final step(s) for your Favicon to go official! Go to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Somewhere near the top you will see this line:

After locating the (above) line, copy and insert the following code below the (above) line:

And don't forget the “URL of your icon file” okay! Save the template and voila. After refreshing your blog site you should see your lovely (or ugly) little Favicon next to your blog address! Happy trying folks. =)