What is a Favicon?
Posted on May 2, 2011 in Web Design | 0 comments
Favicon Definition
A favicon is a small icon, typically only 16 pixels wide by 16 pixels tall, representing your website. Originally it only showed up as an icon in the favorites list, but modern browsers display it in the tab, along the site name. On alamoxie.com, the favicon looks like this: 
It’s just another way to distinguish yourself from other websites, a cut above in professionalism. It can also be handy for users to see when having multiple tabs open and they are unable to read the titles of each tab–they instantly know which tab goes with which site.
How To Make a Favicon
To make a favicon, you will create a 16×16 pixel image. People often use a square section of their logo, perhaps displaying a significant letter, but you could have a graphic designer create a new image as well.
What file format should you use? Modern browsers can use ICO, PNG, JPG or GIF format. Well, all modern browsers except Internet Explorer. IE can be quirks when it comes to favicons. Therefore, I recommend you use ICO (Microsoft Windows icon file) format.
You could easily make your 16×16 image in Windows Paint–but you can’t save it in .ico format that way. However, it’s easy enough to use an online favicon generator to convert the image to the right size and format.
You may also want to use a more sophisticated graphic design tool like Gimp to make favicons.
How To Add a Favicon to your Website
Some WordPress themes, like those from ElegantThemes, have a built in feature to select an image to use as a favicon. If you are not using such a theme, you can probably find the appropriate plugin.
To manually add the favicon, you can put this between the <head> </head> tags of your web page:
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
Of course, make sure to replace the URL with your own website’s URL. It’s typically best practice to name the file favicon.ico and put it in the root of the web page, but modern browsers should work fine with other names and locations.