Saturday, October 27, 2007

Brand your Site with Favicon

Want to give your website a professional look? Want it to be distinctly identified among others? Static and animated favicons, can work for you.

A favicon (short for 'favorites icon'), is an icon associated with a particular website and is displayed in URL bar, in the list of bookmarks and next to page title in tab-enabled browsers in a favicon enabled browser. Basically, favicon is a 16x16 pixel icon. 16x16 pixel is too small size but it can contain something really meaningful and attractive.

While Internet Explorer supports only .ico format, Firefox, Opera, Flock, etc support .png and .gif as well. So, if you are using static favicon, it is advisible to go with .ico file to have support for all browsers.
Firefox has even added support for animated .gif files. It won't be a big surprise if other browsers also add support for them in their new releases.

To have one on your webpage, go through the following steps:
  1. Create a 16x16 or 32x32 pixel ico/gif/png file and name it "favicon.xxx" where xxx is suitable extension.
  2. Include the following tag in the head element of the webpage if you are using .ico image.
    • <link rel="shortcut icon" href="favicon.ico">
  3. If you are using .png or .gif image, use the following tag instead
    • <link rel="shortcut icon" href="favicon.xxx" type="image/xxx"> where xxx is proper file type (gif/png).
With this you are ready with one on your page.

N.B.: GIMP can be used to create .ico image. And if you are looking for creating an animated gif image using GIMP, you can find a good tutorial to start with at http://www.novell.com/coolsolutions/feature/1664.html

No comments: