So You Want Your Own Bookmark Icon, Huh?

...use these to jump around or read it all
[The Icon] [Placing the Icon]
[Wait! I Don't Have A Domain!]

First Things First: This tutorial will only work with Internet Explorer 5.0 and above. Maybe future browsers will also pick it up.

So I get this letter one day and it's 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 email. 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 will show 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 me along 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 http://www.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 did have the ability to sign up for a mailing list to alert you 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, and then save that as an icon. I did the latter. Grab your own trial version of the Microangelo software at http://www.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: .

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

Placing the Icon

MSIE 5.0 is set, be 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 the 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. From hence forward, 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:

Put the code above in between the HEAD tags on the page. 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 out the fingers faster. Just make sure where you say the icon should 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!

[The Icon] [Placing the Icon]
[Wait! I Don't Have A Domain!]

Back to the Goodies Home Page