1. Technology

Adding a Favicon or Favorites Icon

Set up a Custom Icon When Readers Bookmark Your Site

By

Where I've Been Lately 2008
Thomas Hawk/Flikr/CC BY 2.0 A sample favicon

Here is a favicon that I created for the About.com HTML site.

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.

To Create 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.

I 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 any 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). There are many icon editors available, and Sue Chastain, the Graphics Software Guide, has a list of some good ones. Be sure to save the file as favicon.ico.

If you're trying to build your icon quickly, you can use an online Favicon generator, such as FaviconGenerator.com. 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). There are support issues in many browsers for most of these types and Internet Explorer only supports .ICO. So if you need your icon to show up in IE, you should stick with ICO.

Publishing the Icon

It is simple to publish the icon, simply upload it to the root directory of your website. For example, the About.com icon is located at /favicon.ico.

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 nameed something other than favicon.ico or to store them in different directories.

Place the following in the HEAD of your HTML document:

<link rel="shortcut icon" href="path to icon/favicon.ico">

Did you like this article? Read more of the most current features on web design and development.

©2014 About.com. All rights reserved.