All About the Favorites Icon

All About the Favorites Icon

We know you've always wanted to totally trick-out your website — you know, get some color, add a hip little ditty that really stands out and says, "I'm cool." For example, you may have noticed Wired Digital's totally stylish icon that shows up in your browser address bar, and chances are you're burning with jealousy. Well, burn no longer.

Remember how back in the day when you were a tot and using Internet Explorer 4, you could put a custom icon next to a bookmark in your Favorites? Thanks to the birth of Internet Explorer 5x, you can now put that icon on the Web, and have everyone else see it, too. Or, rather, the estimated 75 percent of your readers who are running Windows and have Internet Explorer 5.0 or better.

So, what's an "icon"? According to my official techno-babble dictionary, an icon is a small graphic that represents an object — think of your little trash can or recycle bin on your computer's desktop. In this case, we will be dealing with a square bitmap made up of a small grid of pixels with a layer mask on top. This mask allows the bitmap part of the icon to show up on your screen, while any masked parts remain transparent. Icons usually contain more than one set of bitmaps and masks per file, so that the system can switch the icon automatically if you change the resolution or color bit depth on your screen.

Why would anyone want one popping up in their browser? Even though it's another Microsoft-sanctioned security risk item (which Microsoft itself doesn't even utilize — aside from the default Internet Explorer icon), adding an icon to your URL gives your site more individuality and, of course, increases the cuteness factor considerably. When presented with this pretty piece of GUI along side the content they so crave, your readers will come back to your site time and time again.

The icons we'll be creating will show up both in the user's Favorites list and the History/Address bar of the browser. Also, if a user really likes your site and wants to add a link to your page in his or her Windows Start menu, your icon will show up there as well. Any shortcuts that they drag to the Desktop, the Quick Launch toolbar, or any other folder or menu will also display your custom icon.

Are you salivating yet? Do you want one bad, like real bad, like "I'm so crazy I could hop a fence" bad? Calm down! The fun has not yet begun. To be able to make and edit icons, upload them to your website and make them viewable in your users' Favorites lists, you must have all of the following:

Windows 95 or later.

Internet Explorer 5x or later.

Icon editing software — we're using IconForge for this tutorial.

Website/FTP access, and your Web host should allow you to upload .ico files.

In this tutorial we'll cover the making, the breaking and even the faking part of being an icon-eer.

Let's get started, already!

You Say You Want A Resolution?

If you haven't done so already, go get yourself a trial version of IconForge either from their site or from Favicon.com. Once you've finished downloading, follow the directions for installation. Done already? Open that puppy up!

Okay, what next? Since you probably don't have a clue as to where to start, I'm going to walk you through how to make an icon that looks like this:

Isn't it lovely? We're not going to go over all the tools in-depth for the sake of brevity (there are some pretty awesome features, so dig deeper), but this pretty little icon is going to involve some effort.

Once you've loaded up IconForge, the first step is to select how many resolutions, or "sizes," you want in your icon to support.

The default Explorer icon to the left is 32x32 pixels square and is set to show up to 256 colors (8-bit). Most people, however, use a 16x16 pixel icon (like this ) with 16 color support (4-bit) — you know, more compatibility for lesser-quality hardware that may have trouble displaying 8-bit graphics.

Either way you go, if you only pick one resolution, your final icon will squish down into the favorites list and expand on the desktop. Unfortunately, this creates potential for some fearsome ugliness. For an expert view on the perils of resizing images, take a peek at this slice of Jason's site optimization tutorial. To keep your image from smudging when it resizes, we're going to make a multi-resolution icon. A larger version of the icon will appear when a high-resolution icon is needed, and a smaller icon will appear when the smaller version is called for.

Not sure about this resolution stuff? Let me pull out that techno-babble dictionary again, so you can see what I'm talking about. Oh, hey, they even included a chart!

COLORS to BIT to RESOLUTION

256 colors (8-bit) looks best on 32x32px icons:

16 colors (4-bit) looks best on 16x16px icons:

2 colors (1-bit) looks sexy on both:

or

Now that we've successfully absorbed some more life-changing knowledge, it's on to the easy stuff! So say a little prayer to the pixel diety of your choice, and ask her to not let us go nutty while working on this thing.

Amen.

Icon Action

To get started working on our multi-resolution icon, just go to File > New > New 4 Image Favicon.

Next, double-click on the first square in the upper left corner inside the box that appeared. It should already be selected with a red box, so you'll know right away what's going on. This will open up a new window, leaving the previous ones unharmed. Got it?

Now, grab the Paint tube tool . Select a nice hot pink as your foreground color by clicking on it in the color palette.

Then, click on the canvas to dump the paint and make the nifty pink background.

Next, change your foreground color to white and grab the Text tool so we can add a text element to the icon-in-progress. Click on the canvas and type a letter — how about a lowercase "e" (for Emily, natürlich)? Right-click on the letter to bring up the text options. Change the type size to something nice and big like 18pt or 20pt and change the font to Arial. Click OK. Now, click-and-drag the letter to the center of the canvas.

Now it's time to clean up the area around the lower case "e". we want the edges of the letter to almost touch the outside edge of the icon. To do this, grab the Rectangular Select tool (it looks like a Crop tool, but it's really one of those multi-purpose dealies) and cut away the edges that you don't need. Select the extra pink around the icon, first on one side (being careful not to crop any parts the letter), and then another.

Hit the Delete key each time you finish your selection. This will make the deleted area transparent. We should have little corners left over on the outside of the "e."

Go ahead and Close this window. You will be prompted to save your changes. Click OK.

You should see the icon you just made, along with three empty ones. Here you have a choice: Either click the "Duplicate the Selected Icon to All Other Icons" button or edit each size by hand. If you choose the easy route, be forewarned that it doesn't always apply clean imagery, especially if you're trying to mash the 32x32px icon into the 16x16px icon. Bye bye, detail! If you choose to edit each size individually, just remember to increase the font size a bit for the larger icons.

Now go ahead and save it! If you followed my instructions, your icon (when viewed at 16x16px) should look something like mine:

Since IconForge for Favicon.com is so smart, it's already going to try to save your icon in the correct format with the correct settings. But, just so you know, and in case you're not using this program, here're the specs:

The maximum allowable file size is 1,046 bytes (a little more than 1k).

The default file name is favicon.ico.

Once you've followed these instructions to the letter and you've browsed through all the image handling effects, you'll have no problem coming up with your own designs. You can even liberally rebel and make each size a different little illustration. How cute! How mean. Or worse yet, make them all transparent! Hey, where'd it go?

If you want to use icons with other names or different icons for different pages, skip on over to the next page where these and other exciting topics will be discussed.

Playing Tricks

While nothing more than your bare-bones icon is necessary, sometimes a bit of code can make all the difference between "trick" and "treat." Normally, you would name the file "favicon.ico" and dump it into the main directory of your site, as well as any other directories containing HTML files that you think users might bookmark. That's all you need to do — if you put your .ico file in the root directory of your site, Explorer will automatically display your icon when a user bookmarks any HTML file that lives in the root directory.

Of course, there's more than one way to skin a cat, or, in this case, amp up your site's icon array. The following are some examples of what you might want to do on some of your pages to further customize the way the icons are served. If you need help with HTML tags and syntax, check out our Intro to HTML.

If you want to give the user's browser a little help in grabbing your favorites icon, insert this code into the <head> portion of your HTML document:

<LINK REL="SHORTCUT ICON" HREF="http://www.superbaum.com/favicon.ico">

If you'd like to use an icon with a name other than "favicon.ico" or put it in its very own directory — and who wouldn't, really? — simply let the browser know where the icon lives on the server by dropping this inside the <head> of the document:

<LINK REL="SHORTCUT ICON" HREF="http://www.superbaum.com/wine/cheese.ico" >

Don't forget that if you give the icon a different name, you have to keep the file extension as .ico, otherwise the little guy just won't work. Now, there are a few JavaScript tricks you can use to ensure that your icon gets displayed properly (if you need to brush up on your scripting, give Thau's JavaScript tutorial a once-over). Here's some code for a fancy pre-loader in the <head> section of your HTML to help your icon arrive on time

<SCRIPT language="JavaScript"> da_image = new Image(); da_image.src="favicon.ico"; </SCRIPT>

Alternatively, you can use JavaScript in the <body> of your HTML to supply users with a simple way of adding your page to their Favorites with one simple click.

Example 1:
This script writes a line in your page if the reader has a browser that can see custom icons. They can then click the displayed link and confirm the addition of your page to their favorites.

<SCRIPT language="JavaScript">  </SCRIPT>

Example 2:
This script also writes a line in your page if the reader has a browser that can see custom icons. But in case the reader does not have that kind of browser, it will write a line that tells them they need to get with it, or get lost (or just bookmark the page anyway).

<SCRIPT language="JavaScript">  </script>

Now that we've made the icon and loaded our pages up with the appropriate icon-friendly code, let's move on and upload our files to the Web via FTP.

Put That Icon in its Place

For those of you who aren't familiar with it, "FTP" stands for File Transfer Protocol, and is the process by which files are uploaded to a remote host (server) for use elsewhere, such as display on a website. Yeah yeah, more techno-babble.

So go ahead and grab some free FTP software (CuteFTP for Windows and Fetch for Macintosh work just fine). Take a moment to install the FTP client of your choice, and test it to make sure it's in good health.

Now, log into your server and put up that icon! The icon should be placed into the main directory (usually "www"), as well as any other directories containing HTML files that you think users might bookmark. Also, don't forget to put an icon in any of the other directory locations that you referenced in your fancy JavaScript code. If you changed any of the code in your HTML pages using the snippets on the previous page, you'll want to save and upload those too.

Onward, forward!

Test Your Creation

Ready for some deep wizardry?

Go to your newly-iconized Web page using the newest version of Explorer and add it to the Favorites list (CTRL + D does the trick). Now, sit back and enjoy the view.

What? It's not showing up?

While there's no sure-fire way to make life in the icon lane traffic-free, there are a few things you can do to bring it up to speed. Here's a list for you to print out and worship:

Make sure the file type, file name, total calculated file size, and the directory it's in are appropriate based on what we've learned so far in this lesson. If even one of those things is out of line, go back and fix it.

Try refreshing the page.

Close the browser, empty the cache, and try it again. Not sure how to empty the cache? Go up to Tools > Internet Options, and within the Temporary Internet Files area, click Delete Files. Click OK. Click Delete Files again, this time making sure the Delete Offline Content box is checked. Click OK, and then OK again. Refresh the page. Sometimes it really does the trick — think of it like evicting an old tenant so that the new one, the prettier one, can feel at home.

Add the Link directive statement I provided on page 4 to your HTML, upload both the revised page and the icon, then go back to your site. Add it to your Favorites. Go ahead and overwrite any existing copies.

Delete that particular Favorite, close the browser window, open it back up, and add it again. Don't ask, it just works.

Delete that oh-so-evil-and-dastardly Favorite, empty the browser cache, close the browser, and restart Windows. Go bookmark your page again.

Hold down CTRL while dragging the shortcut to the Desktop, Quick Launch toolbar, or any other places on your computer. This helps to sort of reattach the icon to the URL.

Hold down SHIFT while simultaneously holding down the left mouse button on the naughty shortcut. Maybe it will refresh, maybe it won't.

Get out from behind that firewall, even if it means you have to test your page at Grandma's town cottage instead of paranoid Uncle Urvin's backwoods barricaded garage. I've discovered that while you can bookmark pages from behind a firewall, sometimes you can't see the custom icon associated with it. Remember what we mentioned before, about security issues? That may have something to do with it.

Finally, bookmark your page from anther computer on another day at another time. Relax! Icons are fickle, and yours might just be having a bad day. Who knows?

And now, on to some productive alternatives for those of you who enjoy hanging out to the left of the mainstream, then a couple of what I deem the greatest resources available out there on the Web.

More Fun Projects for Rainy Saturdays

Now you know all about this oh-so-cool little ditty — what it's made of, where to find it, how to make, test, and help it along, and most importantly, that it can be done. And hey, even if you can't make custom Favorites icons, here are some more things you can do.

Make custom icons for your desktop

If you're running Windows, you can do this with the software we just downloaded (or, go find your own). Then, you can manage your massive collection with something like Microangelo. If you want to make icons for your Mac, I suggest that you use either IconBuilder or plain ol' ResEdit. And, just for the record, my Mac looks way cooler than my Windows machine.

Make little penguin icons

Ever heard of GIMP? You Linux users can join the fray — as if you haven't already! Favorites icons can be displayed in the KDE Konqueror Linux browser, with support from other Linux browsers on the way soon.

Join an icon community

There are several websites out there that cater to icon artists and hold massive collections of the little buggers. To start, become a member of IconTown, an online community of icons. While you're at it, sign up for IconCow's newsletter, or just stop by every now and again to check out what's new in the world of pixels.

Get creative and promote capitalism

Make mini 'toons out of icons saved as GIF's. Or, better yet, put them in a Flash movie. Make souvenirs for others to download in memory of your wonderful website, delve into the madness of GUI science, or, gently hug a pixel.

Now that I have you bubbling over with enthusiasm, I'll leave you with some other icon resources you can seek out, should you hit a snag. There are an awful lot of pixel-pushin' places to visit out there. But if you go to places such as the GUI Galaxy, Pseudoroom, or the IconFactory to get handy tips, enter contests, or download the latest versions of their desktop icons, you won't be disappointed.

That's it!

Now go forth and pixelate the world!
All About the Favorites Icon

http://www.htmlgoodies.com/tutors/favicon.html#icon

So, You Want Your Own Bookmark Icon, Huh?

by Joe Burns, Ph.D.

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="/~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!

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