How to Make Your Own Favorites Icon
Home > Build
> Design > Tips
by Jeremy
Luebke
Have you ever seen the mysterious 'favicon.ico'
error in your site stats? Under Internet Explorer 5, when
someone adds a site to their Favorites, the browser looks
for a file called 'favicon.ico' on the server. This file is
the graphic that is displayed in the users Favorites menu
and stands for 'Favorites Icon'. If no icon is found, it is
reported as a 404 (File not found) error, and the browser
uses the default blue Internet Explorer icon.
Want to see an example? Go to Yahoo.com
and add the page to your favorites. Now look in the folder
and you'll see the familiar Y peering out at you.
How is this done? It's actually quite easy.
This tutorial will take you through the steps.
There are a few tools needed to complete the
process:
- An image editing application, such as Photoshop, Paint
Shop Pro, or Fireworks.
- An icon editing tool or a graphic converter.
Unfortunately there isn't a lot of room to work
with. The icon must be no larger than 16 x 16. It can use
up to 256 colors, but the maximum file size is 1046 bytes
so you're better off with 16 or 8.
The first thing you want to do is open your
graphics editing program and either open up an existing logo
or make a new one. While you're working, the logo can be any
size you want as long as it's a perfect square. When you're
finished working on it, you'll want to scale it to 16 pixels
wide by 16 pixels tall. Once everything is to your liking,
save the graphic as a GIF or JPG to your local hard drive.
It wouldn't hurt to also name the icon 'favicon'.
Now you'll need to pull out your Icon Editor
or Graphics Converter. For this tutorial I chose to go with
Irfan View. I chose this program for a few reasons but mainly
because it is freeware and can convert most image formats
to .ico. The icon can be created and edited in the graphics
editor so an actual icon editor would be redundant. You can
download your copy of the Irfan Viewer here.
Now launch Irfan View and open up the 16x16
logo you just created. Then go to File > Save As. Make sure
the 'Save as Type' field reads '(*.ICO) Windows Icon'. Once
the file has been converted, you are ready to go.
The next step is to upload it to your server.
There are two options you can take so that the Icon will show
up on all pages of your site. You can upload a copy of the
icon to your root directory, or if you like to keep the root
clean, you can upload it elsewhere and simply point to it
in the HTML code. If you choose the second option you will
need to place the following code within the <HEAD> tags
of each page:
<LINK REL="SHORTCUT ICON" PATH="/your/path/favicon.ico">
Make sure to replace the /your/path/favicon.ico
with the path to your icon.
That's it. You now have your very own Favorites
Icon.