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 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.
next page»
