Esotropiart

Blog

first last

Icon Madness (Get Out of the Building!)

It's hardly worth writing a tutorial for browser favorites/bookmarks icons for two reasons:

  1. There are a million tutorials out on the web that have essentially the same instructions as I have.
  2. Even if you follow these instructions very closely, half the time it won't work! Woo hoo!

So why am I going to write such a repetitious, ineffective tutorial? Because I said I would in an earlier EsoBlog entry. I better watch what I say! happy face Here goes...

For those of you who simply don't know what I'm talking about, go to an extremely famous web site, like Google, Yahoo or MSN (or Esotropiart). Notice how large sites like these have a custom icon showing up to the left of their addresses in your address bar? If not, then you probably don't have a browser that supports such functionality very well. Firefox and IE5+ generally support favorite icons, but I'll get into that later. Anyhoo, the idea of such icons is to visually promote a site's identity. When a site is added as a browser bookmark or favorite the icon will appear alongside the name of the site, so sites with icons grab more attention.

There are two steps to adding an icon:

  1. Dreaming up and Designing an icon (.ico) file.
  2. Putting the newly created file in the right place so browsers will use it.

The fist step of designing and creating the icon file is by far the hardest step in the process. For those of you people who know what you are doing graphically, this should be no problem at all. For an average computer user, this is a somewhat daunting task, but I'll show you how I did it.

First of all, you need a paint (or photo-editing) program of some sort that can save in a variety of formats. On the Windows platform, Windows Paint is fine for this, though there are certainly better programs. Secondly, you need a program that can save in .ico (icon) format. If you have any graphics or paint programs on your computer, open any file with the program, click on "Save As" in the File menu, click on the "Save as Type" drop-down box, and if you see ".ico" in the list, you're in business. Most people don't have such a program, so go on the net and do a search for "freeware icon editor" or "shareware icon editor". You will find numerous such programs; download one and see if you can draw out a little icon. It should not be hard to figure out. I suggest doing a search for IconEdit32, an extremely good free icon editor - no need to look further.

If you find a free icon editor, just use that for simplicity rather than trying to use both your paint program and the icon editor. Since each icon editor is slightly different, I can't offer a step-by-step tutorial on how to draw an icon. I think it is fairly self-explanatory once you have an icon program to fool around with. For advanced users, however, you can design your icon in any graphics application. If going this route, make sure to design your icon at about 48 x 48 pixels because icons can be various sizes, and you can always shrink the master icon down to the smaller required sizes (unless you are meticulous and want to draw the smaller ones pixel by pixel). Save the master icon in .TIF, .GIF, and .JPG file formats. Most icon editors will allow you to import a source image to work from. Since paint programs have more tools than icon editors, I found it much easier to paint the icon how I wanted it and just use the icon editor to save as the .ico file format.

One thing you should know about icons is that they are actually libraries. An icon is not a single image, but rather it can be a group of many icon images packed into one file. Typically, a good icon will contain the same image several times in different sizes and color depths. Internet browsers vary in what they "want", but the safest bet is to create your icon as a 16 pixels wide by 16 pixels high image with a maximum of 16 unique colors (4 bit color, for those who know what that means). I would encourage you to save your icon in the following sizes and color depths:

  1. 16 W x 16 H, 16 colors
  2. 32 W x 32 H, 16 colors
  3. 48 W x 48 H, 16 colors
  4. 16 W x 16 H, 256 colors
  5. 32 W x 32 H, 256 colors
  6. 48 W x 48 H, 256 colors

Here are examples of the icons I created for Esotropiart to fill my icon library (matching the above specifications):

  1. 16 x 16 x 16
  2. 32 x 32 x 16
  3. 48 x 48 x 16
  4. 16 x 16 x 256
  5. 32 x 32 x 256
  6. 48 x 48 x 256

If you don't notice much difference between the 16 and 256 color samples above, that is because I chose a custom palette (or adaptive palette) for all, meaning that only colors that appear in the untouched, original image are used, creating very nice results. If you work with web-safe colors found in a standard palette of sorts, your icons will look horrible (unless you like super hard edges and bright colors). You could technically add three more images to your library for the various sizes in true color depth (millions of colors), but there is not much point when a 256 color version looks perfect. Icon images are so small that they rarely use all 256 available colors unless you have a really colorful icon. Besides, the more icons you add to the library, the larger the file becomes. Any good icon editor will take a source file (like your 48 x 48 pixels master image) and automatically create images of all these sizes and colors depths and store the images in a single icon libray (.ico). If the icon editor allows you to edit each size and color depth image, resize your master image and limit the colors within your favorite paint program. When you have the perfect icon for each size, cut and paste the entire image from your paint program into the icon editor window of the same size and colors (this should be possible, but you may have to save each different file and import them).

Make sure to save the icon file with this exact name: favicon.ico. Don't ask me whether or not that makes any difference. I don't think it does, but other tutorials out there have had this little tidbit, so I must also. It is possible that web browsers only look for an icon with such a name, so it can't hurt.

Now for step 2, the easy part: where to put the icon so the browsers will find and use it. Upload the icon file (favicon.ico) to the root folder of your web page, as well as every subfolder where reside HTML files that actually produce visitable content (.htm, .php, .asp, etc.). This might be all you need, but to be "safe", you might try putting the following code somewhere in-between the

tags in each file where you want the icon to be used:

If you don't want to duplicate the icon file into every single folder, you can simply vary the above code to include either a complete absolute or relative path to where the file can be found (these are just examples from my site, yours will vary):

absolute:
relative:

Disclaimer: As far as I can tell, these are all the tricks of the trade to get the icons to appear in most browsers. Mind you, you might have to refresh pages, delete old bookmarks/favorites and re-add them, etc. There is about a 50% chance this whole thing will work because it seems this cool feature is not fully supported by any browser. For example, to get it to work in IE6, you might have to click and drag the blue "e" icon that appears in the address bar to some random location on your screen, because that little "e" likes sit on top of your newly created icon just to annoy you. And he might jump right back on top and make faces at you. happy face

first last