What Are Favicons?

May 10, 2007

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:

A Beautiful Site's favicon 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.

16x16, 32x32, and 48x48 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 the <head> section of your HTML will ensure that your favicon will be found:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

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, <link> to it!

Discussion

This discussion is now closed. If you want to leave feedback, you’re welcome to do so on Twitter.

  1. Great tut, thanks! Featured it on our site too.

    January 16th, 2008Beeex.net
  2. Best article I’ve found so far, finally! But, where is the alpha-transparency? I swear I’ve seen icons out there that use it.

    June 24th, 2008iGuide.travel
  3. Multi-resolution favicons with alpha transparency (the favicon holy grail?) can be made using a program called IconWorkshop.

    July 27th, 2008Map Wiki
  4. 16 and 32 pixels square should suffice for most favicons—anything more will significantly slow page load times for almost no benefit. Just these two lowest resolutions with full color and alpha transparency is already a 5kb file.

    August 25th, 2008Link Points