Creating the Icon
August 3, 1999
But, assuming you want to convert an existing logo, let's
get to it. Open your logo in your favorite graphics
program. (If you have the original logo saved in an
uncompressed state, it will yield the best results). If
your logo should be in
.gif format,
increase the color
depth to 16 million colors for better results in your
edited product.
Our end goal is to have a square image, but not all logos
come in square. With luck, your image will be such that
you can simply
crop
it to a square. The WDVL logo, on the
other hand is slightly
rectangular. Cutting the edges off to make a square was
not an option since it would have removed sections of the
logo. The answer was to add a top and bottom
border of necessary proportions to make the resulting image
square.
The smaller the original image square is, the better
the final results will be. If you're trying to make
a 16 x 16 icon from a 500 x 500 square, you're going to
lose a tremendous amount of quality in the resized image.
As you can see, the WDVL logo which started as a 90px x 90px square
loses clarity when resized to 16x16.
Once you have your logo centered on a square canvas, save
it to a
format
your icon program can read. Icon Forge
reads gifs, jpgs and bmp as well as various other formats.
Time to fire up that icon editor. Select Open, not New, from
the Menu bar, locate your 16x16 image and click OK. The
"Select a portion of this image to create an icon" dialog
box will open. There are two things you need to
do here. First and foremost, change the Size to 16x16
and if needed, the Resolution to 256 colors.
If the size box isn't set to 16x16 you may find your logo
is a tiny dot in the upper left-hand corner of the icon.
Adding
Now, let's put this whole thing together. There are
several ways of getting your icon to show up. By far the
easiest is to upload the ico file to the root directory
of your server. (eg. www.wdvl.com/favicon.ico). Internet
Explorer will automatically look here for the favicon.ico,
so your job is done.
Not all
of you will have this option, unfortunately. But all is
not lost; there are other ways to make this work, it just
depends on what you want to do... update all of your files
or use a little extra server space and upload the icon to
each directory you want the icon to show up for.
The last option takes no explanation, just start uploading
and keep at it until you've seeded every directory with a
favicon.ico file. But,
supposing you'd rather not fill your server with little icons,
you can still upload a single ico file and call it from each
of your pages by adding the following line to each page:
<LINK REL="SHORTCUT ICON" href="/path/foo.ico">
If you have a relatively large site and already have it
set up with header/footer templates called by
Server Side Includes, you can add the line to the header file.
This method works well for those of you who have more than
one domain on a single server. Upload several icon files,
one for each
domain, with different file names.
In the individual include file for each domain's header
add the appropriate
<LINK REL="SHORTCUT ICON" href="/path/foo1.ico">
to the icon you've created for that domain.
Whether you have a single home page or a string of domains,
a custom icon adds a final polish. These few simple steps
is all it takes to add your personal touch to bookmarks
across the web.
Additional Resources:
Preparing the Image
The Dastardly "favicon.ico not found" Error
|
