Originally Published on Abeautifulsite.net on May 10, 2007 By Cory LaViska
A favicon (pronounced “fave-icon”) is a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators.
Well-designed favicons are styled to match the logo or theme of your website, that way users have a quick and easy way to recognize your website at a glance.
Here is our favicon, displayed in the Firefox address bar:
What type of image is a favicon?
Although most modern browsers will recognize PNG, GIF, and JPG formats for favicons, Internet Explorer currently does not. It is recommended to use the Microsoft ICO format, which works in all browsers.
What size should my favicon be?
Another good reason to use the ICO format is because it can contain multiple favicons of different sizes in one ICO file. It is best to have, at minimum, a 16×16 pixel version. I usually include 32×32 and 48×48 versions as well. That way, if users drag the bookmark to their desktop they will see a nicely scaled version of the icon instead of the 16×16 version stretched out. To learn how to create a favicon with multiple sizes, see How to create a favicon below.
Below: 16×16, 32×32, and 48×48 versions of A Beautiful Site’s favicon. Each image is embedded in one favicon.ico file.
The most common sizes for favicons are:
- 16×16
- 32×32
- 48×48
- 64×64
- 128×128
How to create a favicon
Although there are many ways to create favicons, the easiest is to use an online tool. We happen to have a favicon generator that’s entirely free. It’s called Favikon. To create your favicon using Favikon, simply upload an image, crop it, and then download the resulting icon.
How to link to your favicon
Now that you’ve created a nice little favicon, you need to tell web browsers and other applications where to find it. Adding this line to thesection of your HTML will ensure that your favicon will be found:
The location of the favicon isn’t really important, as long as the href attribute is accurate. Most favicons, however, are placed in the root directory (the directory that contains the homepage). Keep in mind that it is not necessary to have multiple instances of the same favicon on one website.
If you add a favicon without linking to it within your HTML, you may notice that some browsers will still find and display it. This only occurs if the favicon is in the root directory. It isn’t good to rely on this method, so if you want to make sure that applications will see your favicon, to it!
About the author
New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.
Need to get in touch? Catch me on Twitter.