Creating a favicon for your Web site

Go to any major Web site, and you’ll almost certainly see an icon to the left of the address in your browser. This tiny image is called a favicon (or Favorites Icon), and with a little effort, you can create one of your own.

Design your icon

At just 16-by-16 pixels in size, favicons can be a challenge to design. Pictures and intricate company logos become unrecognizable when scaled to such a small size, so you’ll need to come up with something simple and, yes, iconic—like the first letter of your name or perhaps a single graphic element from your company logo. You can create a favicon with just about any image editor, but for this example, we’ll use Adobe Photoshop CS4 ( ). We’ll also be generating a favicon in the newer .png format, which allows for full color icons with anti-aliased edges. Note that favicons can be larger than a 16-pixel square to take into account their use in bookmark lists and RSS feeds, but for this article, we’ll focus on how to create one to appear in your browser’s address window.

As you design your favicon, keep it streamlined and stick to the gridlines. Horizontal and vertical edges that do not adhere to the grid will end up looking muddy and indistinct. Avoid using too much detail; after all, each square of the grid will be reduced to a single pixel when scaled down.

Uploading your icon

Exporting the icon for Web use is straightforward. Choose File -> Save for Web & Devices and then choose PNG-24 from the Preset pop-up menu. Click Save, enter favicon.png as the file name, and once again click Save. Now go to the Finder, find the file, and rename it “favicon.ico”. The Finder will ask you to confirm that you want to change the file extension; click “Use .ico” to continue.

The last step is to upload the file to your Web site. Launch your FTP program and locate your Web site’s root directory, which is typically where you find your home page (i.e., home.html, index.html, or index.shtml). Upload the favicon.ico file to this directory, and you’re ready to roll. Use your Web browser to visit your home page, and your new favicon should appear right next to your Web address in the address field. If you want to make absolutely sure that your favicon shows up, you can add the following code to the head section of your page:

While this uploading sequence is fairly universal, there are server configurations of various types that may prevent a favicon from appearing. So if these upload steps do not work for you, consult your ISP for special instructions.

Favicons are valuable bits of eye candy that can make your site more memorable. They provide visual cues for your visitors and add a subtle polish to any Web site. And they’re surprisingly easy to create.

Chris McVeigh is an author, illustrator, and toy photographer based in Halifax, Nova Scotia.