So, You Want Your Own Bookmark Icon, Huh?

First Things First: This tutorial will only work with Internet Explorer 5.0 (and above when they come out).

As of 7/6/99, no other Netscape or IE browser supports this event.

So, I get this letter one day asking why an error log was showing requests for something called favicon.ico.

I had never heard of such a thing and neither had the person sending me the e-mail. An investigation ensued.

If you haven’t heard about it yet, MSIE 5.0 has a great new feature that allows you to create a small (16X16) icon and place it on your site so that when people bookmark using the 5.0 browser, their bookmark shows your little icon.

Goodies is set up to do it right now. So, if you have IE 5.0, bookmark this page. A little orange “HG” will pop up in your Favorites Menu next to this page’s link. (Strangely, sometimes the icon shows right away, and other times it pops up the next time I open the browser.)

So, follow along with me here and let’s get you up to speed. You’ve got Icons to place.

The Icon

The hardest part of this little exercise is getting an icon. The parameters are pretty simple. Your icon must be:

• …16 pixels by 16 pixels

• …in the “.ico” Win32 format

• …named “favicon.ico”

We’ll talk about placement in a moment, but for now, we’ll get into the daunting task of saving something in ico (icon) format.

I own three graphic editors. They are all full versions. None had the ability to save something in .ico format. So, I went looking. I found two hits.

The first was the site favicon.com. The search engine text said that I could make an icon there.

Well, when I showed up, the icon maker was down. However, they do offer the ability to sign up for a mailing list that will alert me when their Java-based icon software comes out. It may be available when you read this.

Since I have no patience, I went looking for some other program that would allow me to create an icon.

Bingo… Microangelo. This is a shareware program that allowed me to either create the icon right to the screen or to create a 16X16 in PhotoShop, save it as a .gif, open it in Microangelo, then save that as an icon.

I did the latter. Grab your own trial version of the Microangelo software at impactsoft.com.

As you can probably guess, 16X16 does not allow for much detail, so I went with a simple orange square surrounding a red “H” and a brown “G”. It looks like this: .

Okay, now let’s assume you’ve got the icon in hand. What do you do with it?

Placing Yhe Icon

MSIE 5.0 is set, by default, to look at the root directory for something called “favicon.ico” every time something is bookmarked.

That’s why my letter-writer kept getting errors. She didn’t have this icon installed and people running MSIE 5.0 were bookmarking her pages. Thus, it threw an error.

Take your new favicon.ico and upload it to the root of your site. You should be able to reach it through this URL: www.yourdomainname.com/favicon.ico. Obviously, yourdomainname is the name of your domain.

Believe it or not… that’s it. You’re good to go. Henceforth, MSIE 5.0 browsers will bookmark your site with that little icon.

Wait! I Don’t Have A Domain!

Not to worry. Let’s say you have a site something like http://www.joesite.com/~joepages/.

You can still use this method of setting the icon, but it requires one more step. You’ll need to put, on every page someone can bookmark, the following code:

<LINK REL=”SHORTCUT ICON” HREF=”/~joepages/favicon.ico”>

Put that code in between the HEAD flags on the page(s). The URL that alerts the browser to the icon is just your Web address with the domain taken off and a leading slash.

See that? If you want, you can put in the entire URL, but that wears the fingers out faster. Just make sure that where you say the icon will be found is actually where the browser will find it.

That’s That

You can change the icon as many times as you want. Just know that once a person has bookmarked, the icon that was present when they bookmarked the first time will be the one that displays.

Enjoy!