Creating a Favorites Bookmark Image – Favicon.ico Icon

Did you ever wonder how to create the small images seen next to URLs in a browser’s address window or next to bookmarks of Favorites saved in a browser? These images are called Favicons.

Favicons are easy to create and work in current versions of Internet Explorer, Netscape and FireFox. Although we have not yet verified it, Favicons are reported to work in the newest version of Opera, as well.

The small image shown above is a Favicon. Favicons are the tiny images displayed next to a bookmarked Favorite in Microsoft’s Internet Explorer and FireFox. Once a site location has been saved in the Favorites, the Favicon icon displays in a browser’s address window whenever you revisit the page as a reminder that the page is bookmarked. Favicons add a professional touch to a Web site, especially when the Favicon image represents a company logo or other distinctive mark.

Creating a Favicon is simple. To get it one to work is even simpler. To get it to work, all you have to do is place the Favicon image file in the root directory of a Web site. There is one catch. A Favicon is an icon file, which is a specific format that most image editors cannot produce, so the file must be saved with programs designed to create files in the special .ico icon format.

Creating a Favicon Image

A Favicon icon is a 16 pixel by 16 pixel image. That does not give you much to work with, so a Favicon must be fairly simple. You are also limited to working with only 16 colors (4-bit). There are two ways to create a Favicon image.

Method 1: the hard way

1. Create a 16 pixel by 16 pixel blank image with your favorite image editor.
2. Enlarge the blank image until you reach a size where you can select individual pixels.
3. Set the color pallet in your editor to 4-bit color (16 colors)
4. Select the colors you wish to use with the image editor’s color pallet.
5. Paint the image by coloring each pixel individually.
6. Save the image as favicon.gif in a GIF file format.

Method 2: the easy way

1. Start with a logo or image you wish to turn into a favicon.
2. Crop a square portion of the image (exact same height and width dimensions).
3. Set the color pallet in your image editor to 4-bit color (16 colors)
4. Using your image editor, reduce the image down to 16 pixels by 16 pixels.
5. Temporarily save your file in a GIF format as favicon.gif.

Converting and Saving a Favicon Image

If you have an image editor that will convert images to a Windows Icon (.ico) format, great! All you need to do is save the GIF image in a Windows Icon format. You must name the file favicon.ico. If your editor does not work with this format, there are several freeware images
converters that are popular. One simple editor/converter that works well is Irfanview.

Installing the favicon.ico Image

As mentioned earlier, all you need to do to install the Favicon is to place it in root directory of a Web site.

If you wish to save a favicon under a name other than favicon.ico or you want to store it in another place on your server, a browser can find the favicon file if you point to it with the following link code placed in the head section of a Web document. You would, of course, have to modify the URL and file name to fit your situation.

<link rel="shortcut icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon">

Have fun creating your own Favicon.