How to Create a Favicon for Your Website

What is a favicon and why would you want one?

Favicon is short for 'Favorites Icon'... it's the shortcut icon people use to recognize your website. You've probably seen them, there are probably some on your favorites list right now. This article will show you how to make one for your website.

Most browsers display favicons in the address bar and in the favorites drop-down menu. The benefit of using one is fairly obvious - it allows you to add a custom touch and helps with the 'branding' of your website.

Then, if you can get your visitor to bookmark your website, their own browser displays your favicon (like your brand) every time they look at their favorites list.

Step One: Start with almost any image

The required size of a favicon is 16x16 pixels, with a maximum of 16 colors (4-bit). No bigger, no smaller, and it must be saved in the .ico format.

You can use almost any graphics editor to make the original image, but few of them have the option to save in the .ico format. For that you will need a program that will convert from .bmp, .gif, .jpeg or whatever, to .ico.

Here is a free no-frills program that might help: Pic2Ico. All it does is take a 32x32 pixel 'snapshot' from another image and save it in the .ico format, which you can then reduce to the required 16x16 size.

If you want a full-featured icon program you can try either IconCool or IconMaker - both have a free trial version that will last long enough to make a favicon for your website.

If you start with a full-featured image editor like PaintShop or MSPaint, begin with a blank 16x16 image and zoom it up huge so you can work with it.

Make your favicon with your company initials, a logo, or whatever you like... but keep it simple. When it's viewed at regular size it should be easily recognized as associated with your website.

Upload the completed image to your root directory. (Webopedia definition of 'root directory')

Step Two: Link the favicon to your website.

After creating your favicon, you must link it with your website. One way is to save the icon with the default file name of "favicon.ico" in your root directory. Internet Explorer automatically searches for this file and uses it for all the favorites and quick links for your website.

Most other browsers can use your favicon when your website is added to a favorites menu, but you have to tell them where it is and what it is called... The following code, added between the <head> codes in your HTML will accomplish that:

It is recommended that you use the full path URL for the image, especially if you give the image another name besides "favicon"... but it must always be in the .ico format.

Step Three: Encourage your visitors to add your website to their favorites menu.

The only way a shortcut icon appears on a user's favorites menu is if the user chooses to add your page as a favorite.

There are lots of free scripts available to encourage and make it easy for your visitor to add you. Here is one you can use, just replace the URL and website title with your information and place it in your HTML where you want it to show:

That's all there is to it. Place the bookmark script on all your pages - or at least on the most important. You can place it in a short sentence like this:
"We get new stuff almost every day, and check back later!"

I've never seen a bookmark script that makes a clickable link in Netscape... as default, scripts tell Netscape users to use Ctrl+D to add the page to their bookmarks.

Here is a slightly more versatile free bookmark/homepage script writing tool if you want to use it.

To Your Success!
Tim

By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.

Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to