How To Create A Favicon

Today if your web site does not have a favicon, it looks unprofessional. These days all the big sites are using them. But do not let this worry you, creating a favicon is a lot easier than you may think. Why not make one for your site? This is a concise, yet helpful guide to creating a favicon for your web site for free in a matter of minutes.

What is a favicon or favorite icon?

A favicon is a 16x16 pixel image with the extension *.ico that is used to represent a web site.

Here is a screenshot of Publisher Aid's favicon:

What is the point of having a favicon?

Having a favicon makes your web site appear more professional than web sites that do not have favicons. Having a favicon for your web site makes it stand out more in people's bookmarks, which will in turn make people more likely to click on it in the future. Having a favicon also leads to increased brand recognition.

How do I make a favicon?

Download, install and open GIMP, the best open source image editing program.
In GIMP open up your web site logo. Use a square selector tool to select your logo. Make sure to keep the selection box as tightly around the edges of your logo as possible. This will maximize the space of the logo inside the icon. Then resize the image to 16x16 pixels. Repeat this process until it results in an icon you are fond of. If your logo has too much detail you may need to simplify it in order to create a satisfactory icon.
Once you have an icon you are happy with it would be advisable to make the edges of it transparent. That is unless of course you have used all the pixels in the icon already. In order to do this select the "Fuzzy Select Tool." Make sure for the settings you have the following: Antialiasing, Feather edges (recommended radius 3.0), and Select transparent areas enabled. Then select the areas of the icon you would like to make transparent. Once you have all the edges selected hit the delete key once. This will make the edges of the icon semi-transparent allowing it to blend in nicely with any color.
Save the 16x16 pixel icon as "favicon.png"
Find the "favicon.png" file on your file system and rename it to "favicon.ico"

How do I implement the favicon onto my web site?

Simply place the "favicon.ico" file into the root directory of your web site and on most web servers you are already done!

If you want to maximize compatibility with browsers or if you do not have your own domain, it is recommended that you include both these tags in your HTML code for your web site:

<link rel="shortcut icon" href="http://www.site.com/favicon.ico"/>
<link rel="icon" href="http://www.site.com/favicon.ico"/>

Why does my favicon show up in some places and not others? Why was my favicon working and I did not do anything, but now I do not see it anywhere?

Do not worry you did not install or create it wrong. It is common for favicons to do this. It will go back to normal with time, but you can expect to have it disappear and reappear randomly.

Written By: Andy Forsberg