Impossible tri-bar

Digital Phenomena - Your first stop for internet consultancy 
All About the Favorites Icon

Page 3 — 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)

Since IconForge for 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.

next page»

|Home|About Us|Services|Search|
W3C validatedW3C validated CSSCompatible with all browsers