GuidesSo, You Want Your Own Bookmark Icon, Huh?

So, You Want Your Own Bookmark Icon, Huh?

Joe Burns
By Joe Burns

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 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 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 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 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: .

     Okay, 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, 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=”/common/content/article/19981109/hg_favicon/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!

 

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

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories

Developer.com features tutorials, news, and how-tos focused on topics relevant to software engineers, web developers, programmers, and product managers of development teams. In addition to covering the most popular programming languages today, we publish reviews and round-ups of developer tools that help devs reduce the time and money spent developing, maintaining, and debugging their applications. This includes coverage of software management systems and project management (PM) software - all aimed at helping to shorten the software development lifecycle (SDL).

Advertisers

Advertise with TechnologyAdvice on Developer.com and our other developer-focused platforms.

Advertise with Us

Menu

Our Brands

Property of TechnologyAdvice.
© 2024 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.