The tiny 16×16 pixel website icon (known as favicon) that graces every website window (or tab) is probably one of the most ignored aspects of website design. Favicons not only helps you in building your brand but also is an essential aid to heavy-duty surfers. They allow user to quickly identify your webpage amongst the myriad of tabs or bookmarks. Design vs Art Blog has a nice post on the importance of favicons.
Creating a favicon is actually very simply due to their low resolution. You don’t need to be an artist to come up with a decent looking favicon. Here are three websites to help you out with the creation process.
1. Favicon-Generator: This website allows you to simply draw your favicon in a 16×16 grid. Select a colour from the colour wheel and fill in the pixels.
2. Favicon.cc: This free favicon generator provides you a few more options. This website also displays a 16×16 grid and allows you to draw your favicon by filling in the pixels with a selected colour. The advantage of Favicon.cc is that it allows you to create transparent icons by defining pixels with transparency. You can also upload your own image and create your favicon from it. Favicon.cc lists recently created favicons and top favicons. Go through them if you want some inspiration.
3. Antifavicon.com: This website takes a different approach. Instead of asking you to draw a favicon it asks you to enter the text of your favicon and specify the colour you would like to use in your favicon. This is a good option if you want a simple looking textual favicon.
4. FavIcon from Pics: Use this tool if you wish to generate favicon from a picture. It can also fetch your twitter avatar and generate a favicon using it.
Once you are ready with your favicon installing it is dead simple. All you need to do is upload the favicon.ico file and add the following line of code to your <head> section.
<link rel=”shortcut icon” href=”http://whatever.com/favicon.ico” type=”image/x-icon” />
Replace http://whatever.com/favicon.ico with actual path to the favicon.
If you wish to install favicon for your WordPress theme you need to add the above line to header.php (before </head>) file present in your themes folder. Alternatively you can use a plug-in like MaxBlogPress Favicon or Shockingly Simple Favicon.
Thats it folks. Go ahead and create a custom favicon for yourself if you still haven’t. And in case you need some inspiration check out Smashing Magazine’s list of 50 Remarkable Favicons.