Favicons: the why and how
The favicon appears both in the address bar and in the tabs on Mozilla browsers
So why should you even bother creating your favicon?
- It gives you exposure. Visitors can quickly match your website with the image. Just to test this out, can you quickly match each of the following icons to their corresponding website/brand?
- Favicons are used in bookmarks across many browsers. Your website has the ability to stand out and create a visual impact (even through a small 16 x 16 image) in a visitor’s bookmark collection.
- It only takes 5 minutes to set up.
How to make one
Let’s assume you already have a company/website logo. It is a good idea to use it in your favicon as well. However, you only have 16 x 16 pixels at your disposal, so you might want to edit your logo a bit before shrinking it to the lowest size possible. For example, let’s take Adobe’s and Carlsberg’s logos:
Adobe’s logo is pretty simple in it’s form; only 3 shapes, red & white, no curves. So the resulting favicon is pretty straight forward: 
On the other hand, a beer’s logo is often very complex. Creating a 16 x 16 image with “Carlsberg” written all over it is probably not a good idea. In this case, it is common practice to simplify the graphic while retaining colors and shapes as much as possible. Here’s what they did:
Some graphic editors may not support exporting files in .ico format. There are some desktop applications for conversions, but the quickest way to do this is using an online tool such as ConvertIcon (only converts .png to .ico and back).
Keep in mind to save the file as favicon.ico and upload it to your website root directory (it should be accessible through www.example.com/favicon.ico). In the past this was used by Internet Explorer as the default place to look for the favicon. Only one thing remains: include the following HTML tag in your pages within the <head> </head> tags.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
