If you said “What the hell is a FavIcon!?!” after reading that word, you may be excused. Not many now the definition, but I’m sure you must have seen it, Mozilla Firefox users at least.
FavIcons (it’s linked to a Wikipedia entry on that topic) are those tiny little graphic buttons in the address bar, to the left of the URL, and also in the tabs of Mozilla Firefox when you open a site. Now, most browsers support the feature, but since I’m biased towards Mozilla Firefox, I chose to mention it. Not all sites have this, so if one does, take it that the site admin is knows what he’s upto, although adding it is not a major headache.
So if you care to look at the top, dear Mozilla Firefox users, don’t you see the cool little ‘GQB’ FavIcon there? Also on your tab. It’s a nice change from the Blogger B that’s seen on most BlogSpot blogs.
I anticipate that many of you too would like to use this, so here’s the method in brief:
- First, create an image which can be used for the FavIcon using Adobe Photoshop, CorelDraw, the GIMP, good ol’ (bad ol’?) Microsoft Paint or any other graphics editing program. Now don’t ask me how to use these graphics editing programs, because that’s a separate topic. You may send in specific queries though.
- Make sure that the image is discernible when reduced to a very small size; a badly created one will look like a horrible jumble of colors.
- Use minimum amount of text.
- Now, resize the image to 16 X 16 resolution; don’t crop it.
- Save the file with the extension .ico, like favicon.ico
- You’ve to upload the file somewhere. If you own your site, nice. Otherwise, you’ll have to look somewhere else. Unfortunately, not many free hosts out there support .ico file. Don’t use Google Pages, it’ll replace you FavIcon with Google’s; GeoCities no longer allows hotlinking of files, so that won’t work too. The only free service I’m sure of is that of Bravenet; if anybody finds this method works with other hosts do leave a comment here.
- Note down the URL of your FavIcon.
- Now, go to your blog or site, and in the HEAD section, add this line
<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico" />
Remember to replace the URL in the href section with YOUR own FavIcon’s URL. Of course, you may add more attributes to this section, but this is the plain vanilla takes-least-amount-of-time version.
- Save and publish your site. This is something many forget to do.
- Please note, that you have to individually add this line to every page you want the FavIcon on, or start using a template. Go learn CSS for this.
Load your site now. Your cute little, or rocking little FavIcon would there as your personal style statement for others now! If it doesn’t, bad luck, your host probably doesn’t allow hotlinking, or doesn’t allow .ico files, or Bravenet has stopped external loading; a host of reasons, depends on your case. Just try another host, the method is correct, my blog is the proof.