FavIcon For Blogs

Before you read this post, I'd suggest that you click a few more mouse buttons and make the effort of downloading and installing the latest version of Mozilla FireFox. As for the most obvious reasons, you can visit this link. The other reason being Internet Explorer is just not capable of showing favicons for the websites, unless it's version 7.

Why am I talking of favicons, suddenly? That is 'coz (you'll notice it only if you're using any browser other than IE 7-) I've finally managed to get rid of the boring Blogger favicon and got one of my own. And the best part is, it's animated! It looks so very personalized, now.

So, you interested to know how I managed that? Well, I've been scourgiing the net quite a bit for that and now that I've finally got the secret, here it is:
  • You shall need a graphic file that you'd want to convert into an icon file and use it as the favicon for your site or blog page (preferably 16x16 pixels).
  • Now you'd need a website that'll grab that file of yours and convert it into an icon file. Of course you can make it possible by using just Adobe Photoshop or Corel Draw, but it isn't possible for everyone to be rich enough to possess those applications. The websites that I can suggest you are FavIcon, Dynamic Drive & RW-Designer.
  • Now comes the toughest part. You need to find one site that'll allow you to upload .ico files so that you can link to them, in your page. I guess you shall just need to google it out. The site that I myself used was Google Pages.
  • After you've uploaded the icon file (don't name it "favicon.ico"), it's time to put two lines of code in your blog. For that, just shift to the portion where you can edit hardcore HTML for your page. Here's a li'l tutorial for those who use Blogger as their server.
On your Blogger dashboard, click on "Template"

And then, on "Edit HTML"

The resultant page will be something like the above. You can click on the image for an enlarged version, if you please. After you reach the hardcore HTML behind your page, the rest of the procedure is the same for all, Blogger or non-Blogger.
  • Figure out for the tag <head>.
  • Right below that, enter two lines of code :
    <link rel="shortcut icon" href="[URL]" />
    <link rel="icon" href="[URL]" />
Replace the part [URL] with the URL of the icon file that you'd hosted (third step above) and Voila! your favicon is ready. Just click on "Save" and reload your blog page.

Do let me know if this little tutorial works for you. Both rants and raves are welcome.

Related Posts by Glossary



0 Thoughts: