December 20, 2011

Favicon: the cute image for your blog or website

Seen the cute little letter on the browser’s address bar just before the URL of a website or a blog? Like the tri-colour kite next to the Indian Top Blogs URL or the blue birdie next to Twitter URL? These are examples of favicon [short form of ‘favourite icon’].  Though old browsers are not able to display a favicon, all updated browsers can display it well.

Alexa favicon,
zoomed to show pixels

Favicon is an important, and often ignored, design element of websites and blogs. It acts as an unobtrusive logo for your website or blog. People relate it immediately to your web-product, much like they relate a logo to a product in the physical world. 

Typically, favicon is a 16x16 pixel image file with .ico extension. Its small size does not allow for elaborate design or play of shades. By seeing the zoomed Alexa favicon on the right, you'll appreciate the limitations of favicon.  

Favicon can either have a single picture or an animation made out of a set of pictures [as in Indian Top Blogs site]. Animations allow display of more than one identitities associated with the blog or website. 

What looks best in a favicon?

Favicons look the best when they are simple and clear. Favicons displaying a single alphabet or simple geometrical shapes come up very clear. Single or at most 2-3 strong colours with high contrast lead to strong favicons while grading colours – only if applied with care - lead to smooth, graceful favicons.  

Some companies and institutions have beautifully captured their logo in the favicon. Others have used only one or two letters or a shape that express their organization well, without trying to stuff every part of their logo into the favicon.

Look at the following strip of favicons. [Just in case you don't know some of them, they are: Alexa, Apple, Chrome, Doordarshan, Twitter, Wikipedia, Facebook, Unilever, Firefox, IndianTopBlogs, United Nations, Bing, Yahoo and Blogger.] Notice the number of colours and simplicity of design. Also note that when a complex design or more than one letter are used, due care has been taken to use contrasting colours.

Now look at the following strip of favicons of DD News, FAO, UNICEF and US government.

See the DD News favicon? The favicon could have looked much better if they retained the clear, iconic Doordarshan one and coloured it in their own shades.

See the FAO and UNICEF favicons? In trying to copy their logos in full, they have messed up the favicon while their big brother, the UN, has done a great job by just using its initials.

How do I create a favicon and put it on the blog?

You can make a favicon using any of the dozens of free online favicon creators, using an image editor or with the facility provided in the blogging platforms. If you create a favicon using a favicon creator or image editor, you will need to place it in the header of the html file of the website. Though not a big deal, but if you are not comfortable with this, use the method given below.

A quicker and easier way to create a favicon – if you use Blogger - is to use the favicon-making widget of the blogging platform itself. [Go to layout; it is on top of the header menu] In the case of Wordpress, there is no widget available right now but there are plugins to do this job.

We have seen often during detailed review of Indian blogs that many bloggers use a high-quality portrait or a scenery or photo of a product to create  favicon. It usually results in a favicon trying to imitate the details of the original photo. Obviously, a photo of a million pixels cannot be replicated in an image of 256 pixels [i.e. 16x16]. The blogger, used to seeing the original photo, feels that others would also relate the icon with the photo, but the reality is that others see it as a blob of coloured points. 

You need to process the photo before creating a favicon out of it. The first thing to do is to reduce the size of the photo as much as you can, in terms of pixels. Crop the image and select a rectangular piece out of it. Next, do save the rectangular photo as a new photo and work on it.  Remove unnecessary background. Also remove elements that have muted shades, if you can. After that, adjust light and contrast as much as you can do without harming the image quality too much. Now try to reduce colour depth to 256 or even 16 colours. If the results are OK, move forward; if not, go one or two steps back and re-try changing light / contrast / depth. The resultant picture should have clear outlines and strong colours. Now your picture is ready for making favicon using either the online favicon maker or your image editor or Blogger widget / Wordpress plugin.

Happy blogging!