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.
I found Favicon.cc to be very nifty. Doesnt beat my GIMP though! :doh:
Shaunak De’s last blog post..Building a new AMD Phenom based system
Yeah.you cant beat a full fledged image editor.
I’m trying to find the tag that is needed to set a favicon on a webpage. However, all the tags I find online refer to webpages uploaded on the web. Mine is not, its just files in my computer. What tag do I need to use to set the favicon?
The tag should be same.
I recently made a freewebs page however the favicon I added doesn’t show up in Internet Explorer. I searched online but most things I found said that I’m supposed to make a profile page. Can someone please explain how I can get the favicon to show up in IE. I I will have to use the profile page, can you also explain what is supposed to be in the profile page and how to make it?
I personally used dynamic Drive’s favicon creator as it gives you a better output…
Samrat P’s last blog post..Recover Deleted From Files Memory Cards & Hard Disk With DiskDigger
Nice collections buddy !
Will give it a try ! ^_^
S.Pradeep Kumar´s last blog ..How To Check Whether A Blog Is Do Follow Or Not?
Thank you for the list. Pallab, you are becoming one of my favorite blog sties.
Best Regards
I am glad that you like my blog.