Adding a Favicon or Favorites Icon

Favorites icons

Thomas Hawk / Flikr / CC BY 2.0

Have you ever noticed the little icon that shows up in your bookmarks and in the tab display of some web browsers? That is called the favorites icon or favicon.

A favicon is an important part of the marketing of your website but you'd be surprised how many sites don't have one. This is unfortunate, as they are relatively easy to create, especially if you already have graphics and logos for your site.

Creating a Favicon

First, create your image. Using a graphics program, create an image that is 16 x 16 pixels. Some browsers support other sizes including 32 x 32, 48 x 48, and 64 x 64, but you should test sizes larger than 16 x 16 in the browsers you support. Remember that 16 x 16 is very small, so try out many different versions until you create the image that will work for your site. One way many people do this is to create an image that is much larger than that small size, and then resize it down. This can work, but often the larger images don't look good when shrunk.

We prefer to work with the small size directly, as then it's a lot clearer how the image will look at the end. You can zoom your graphics program way out and build the image. It will look blocky when zoomed out, but that's okay because that won't be as obvious when it's not zoomed out.

You can save the image as an image file type you like, but many icon generators (discussed below) can only support GIF or BMP files. Also, GIF files use flat colors, and these often show up better in the small space than JPG photographs do.

Converting Your Favicon Image to an Icon

Once you have an acceptable image, you need to convert it to the icon format (.ICO).

If you're trying to build your icon quickly, you can use an online Favicon generator, such as These generators don't have as many features as the icon generating software, but they are quick and can get you a favicon in just a few seconds.

Favicons as PNG Images and Other Formats

More and more browsers are supporting more than just ICO files as icons. Right now, you can have a favicon in formats like PNG, GIF, animated GIFs, JPG, APNG, and even SVG (on Opera only).

Publishing the Icon

It is simple to publish the icon, simply upload it to the root directory of your website.

Some browsers will find the favicon if it lives in the root of your website, but for best results, you should add a link to it from every page on your site where you want the favicon. This also allows you to use files named something other than favicon.ico or to store them in different directories.