Tutorials

What is a favicon?

Look up in the Address bar in your browser...see that little DW? If you add this page to your Favorites (or Bookmark it), then when your Favorites list is displayed, the little DW shows there too! Pretty cool huh?

This Internet Explorer screen shot shows it both in the Address bar and in the list of Favorites.

This technique is a great tool to "brand" your web site so that folks begin associating your logo with your company.

Internet Explorer will display the icon beside your website name in the "Favorites" menu and in the location bar.

Mozilla, and any other browsers based on the Gecko engine (ex: Netscape) will also display it in the Location bar, and any tabs you have open. It will not display it in the list of Bookmarks.

I understand that Opera also supports it, but I have not checked.

OK, I'm convinced, how do I do it?

It's a lot easier than you might think. It is a simple three step process.

1. Create the icon
2. Upload it to your web server
3. Create links in all your pages

Creating the Icon.

You will need a graphics editing program of some sort. If you don't already have a program that can make or edit icons, go to thefreecountry.com or Download.com and get one. Most are free and it is worth having one around. You might be surprised how often you will want to create or change an icon. You can also use any graphics program, as long as it can save icon files. NOTE: icon files are NOT bmp or gif files, they are different, and must be saved in the proper format. I happen to like Irfanview...a fast and compact graphics viewing program that enables you to manipulate image files and save them in a host of different formats, including as icons.

Deciding on what image to make as your icon is not difficult, but you need to keep a few pointers in mind. Icons are only 16x16 pixels. That is VERY small and will not show much detail. Select images or shapes that are simple and can be displayed in the 16 Windows primary colors. Most browsers will probably start supporting more colors and larger icons eventually, but for now, this is the safest way to make it work.

When you have your design the way you want it, save it with a filename of favicon.ico.

Remember these limitations:

16 primary Windows colors
16x16 pixels
filename must be favicon.ico

Uploading the File

Now all you need to do is upload it to the root directory of your web site. Why there? Why not in the /images directory, or some other place? The only reason is that IE will automatically look for it there. But if you create the links on each page, as I discuss below, then you should be able to put it anywhere. Nonetheless, I recommend putting it in your root directory, and then you can forget about it.

What if your web host doesn't permit uploading of icon files? Well, there is a way around it, but depending on the policies of your web host, it might get you into hot water. So if you do it this way, you are on your own. Once you have saved favicon.ico, you can rename it to something that you CAN upload...like favicon.jpg or something. Make sure you rename the local file, rather than saving it as a jpg. Once you upload the jpg file, then rename it on your server using your FTP program.

If your web hosting company doesn't permit icon files, you might want to send them to www.favicon.com. A great resource for everything related, including a discussion about security and issues that might be a concern to your web host.

Create Links on Your Pages

Earlier, I mentioned that IE will look for the icon in your root directory, and if it exists, then it will be displayed properly. That works fine for IE, but not necessarily for other browsers. Also, if your pages are hosted on a secure server (https://) then it might not work either.

The easiest way to get around both of these issues, and make sure it displays everywhere, is to place some code in the <head> tag of your web pages that points to the location where it can be found. I know it might be a pain to go through each and every page to do it, but in the end, it will be worth it.

Here's the way it will look:

Replace http://www.digitalwinners.com with the url and directory where yours is stored.

Upload your revised pages and voila, your site will now have a favicon!

Copyright � Dick Sowa 2003. All Rights Reserved

About the Author:

Dick Sowa is a retired Professional Engineer and senior manager with the Federal Govt, and is a Partner and Webmaster for Digital Winners, which specializes in services for small businesses and online shopping.