Favicon 101
What is a favicon?
A favicon, pronounced “fave (short for favorite) icon” is the little icon that shows up next to the URL in the address bar of most browsers. It’s also commonly the icon that shows up next to a web site name if you bookmark it or add it to your favorites.
How to make a favicon
All you need is a square image (JPG or PNG) of what you want to make into your favicon. The size does not matter, but keep in mind a favicon is 16×16 pixels, so if you include words or intricate imagery, it will be reduced and probably no longer distinguishable. When you create the square image, make sure you crop it so that there is as little negative space around the actual image as possible.
The next step – making it into a favicon – can be done a few different ways. There are several free favicon generators on the web, and I have found these are easy to use and give great results. My favorite is located at FavIcon from Pics.
Once you create a favicon you are happy with, you need upload the resulting file – favicon.ico – to your web server in the root directory. This is usually the topmost folder that also contains your main web page files. On some browsers, this is all you need to do. However if you want to make sure all of the browsers will recognize that you have a favicon, you need to add this code anywhere between the <head> and </head> code in every html document on your site.
<link rel=”shortcut icon” href=”http://www.yourdomain.com/favicon.ico” type=”image/x-icon” />
