The favicon.ico file is located in the root directory of a website and other subdirectories. When a visitor adds the page to their favorites, this file is used as a small icon in the address bar of the browser or in their favorites list. Favicons are 16 X 16 pixels square or 32 X 32 pixels square. The larger version is used in Windows XP as a desktop icon. Generally, using a favicon file will set your web site apart from the rest because it will stand out in the long list of favorites that someone has on their computer.

What’s a favicon look like?

You’ll notice below two of my websites, coolwebjunk.com and newdomainproject.com. I’ve designed a favicon.ico file for coolwebjunk.com but not for newdomainproject.com. The coolwebjunk.com domain has a small image of a old trunk (similar to one you might find in an attic), while the newdomainproject.com address bar has the generic IE favicon.


Newdomainproject.com with no favicon.ico file


Coolwebjunk.com with a favicon.ico file

What browsers can view a favicon.ico in the address bar?

Internet Explorer (version 5 or later), Firefox, Netscape (version 7 or later), Konqueror, Firebird, Opera (version 7 or later), and Safari. Most modern browsers now support this function.

How do you create a favicon.ico file?

You either need to download a program to create a favicon.ico or you can use one of the free online favicon generator programs. I prefer to use an online favicon generator and my favorite one is FavIcon Generator by Dynamic Drive. You can upload any picture from your computer and it will turn it into a favicon that you can save to your computer and upload to your website.

Other online tools for creating favicon.ico files are:

Favicon Tool at http://www.favicontool.com/

Web Script Labs at http://www.webscriptlab.com/favicongenerator.php

Dagon Design at http://www.dagondesign.com/tools/favicon-generator-tool/

Chami.com at http://www.chami.com/html-kit/services/favicon/

Degraeve.com Favicon Editor at http://www.degraeve.com/favicon/

Favikon at http://www.favikon.com/

Genfavicon at http://www.genfavicon.com/

For more online and downloadable programs to create favicons, check out

The Ultimate List Tools and Software to Create / Generate Favicons and Icons

Once you’ve created and uploaded the favicon.ico file to your website, add the following line to your html page in the header section. This will ensure that the web browser uses your favicon instead of the generic one.

After you finish, close your web browser, reopen it and preview your page. Your new favicon.ico file should load.

Filed under: Web Site Tasks

Like this post? Subscribe to my RSS feed and get loads more!