A bunch of favicons

What Are Favicons?

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:

Example of a favicon

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.

A favicon in multiple sizes

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!

About the author

Cory LaViska is a founder, web developer, and bootstrapper based in New Hampshire. His current focus is on Surreal CMS, an awesome SaaS content management service for web designers. Need to get in touch? You can connect with him on Twitter.

Comments

  1. iGuide.travel says:

    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.

  2. Map Wiki says:

    Multi-resolution favicons with alpha transparency (the favicon holy grail?) can be made using a program called IconWorkshop.

  3. Link Points says:

    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.