How do I add an icon ("favicon") to my website?

This page is showing a generic answer.
To see a more detailed answer customized for you, type your domain name here:

You can add a special icon called a favicon to your website. When visitors go to your site, the favicon will usually appear in their address bar (and in the visitors' "favorites" if they bookmark your site).

Favicons are useful because they allow visitors to easily identify your site. Many websites use them to display a logo: if you look at your browser's address bar now, you'll probably see a small orange tiger paw, which is the favicon for the Tiger Technologies website.

Although most modern Web browsers support favicons, not all do. If it doesn't work with a certain browser, there's no way to "fix" that.

On this page:

Converting a normal image into a favicon

You can use an existing picture as a favicon. To do this, make sure that the image you want to use is exactly 16 pixels by 16 pixels in size, then save it as a either a BMP or GIF image file.

After saving it, run it through a converter which turns it into a .ico file. There are many different convertors available on the Web. Some of these are actual programs which you can download, while others are online tools. One online convertor that we have tested is available at www.html-kit.com.

Using a special editing tool to create a favicon

The second way to create a favicon is to use a dedicated icon editor or a program that allows you to create the .ico directly. Some of these editors are online tools, while others need to be downloaded and run on your computer. We tested one online editor available at somacon.com.

Publishing the favicon file

Once you have created your favicon, make sure to name the file "favicon.ico". The name must be all lowercase. It won't work if you give the file a different name.

After naming it correctly, publish the file and place it at the top level of your website. Make sure the name remains "favicon.ico". The next time you visit your website, you should see the icon in the address bar (you may also need to clear your Web browser's cache).

Can I use more than one favicon?

It is possible to use more than one favicon. For instance, you may want to use a different icon for different sections of your website. You can do this by specifying the location of the .ico file in the head tag of the page: 

<head>
 <link rel="icon" href="http://example.com/favicon_name.ico" type="image/x-icon" />
 <link rel="shortcut icon" href="http://example.com/favicon_name.ico" type="image/x-icon" />
</head>

You should replace "favicon_name" with the actual name and location of the favicon that you want to use. (By the way, the two different "link rel" lines above aren't a typo: you should include both lines for the reasons described on this page.)

Similar files

The Apple iPhone and iPod Touch request similar files, named "apple-touch-icon.png" or "apple-touch-icon-precomposed.png". Wikipedia explains more about these files.

Copyright © 2000-2024 Tiger Technologies LLC