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.

It’s best to start with a large file and then scale it down to 16-by-16 pixels. In Photoshop, choose File -> New and then enter a pixel dimension of 512-by-512 at 72 pixels per inch and with a transparent background. Click OK to create the file, and then choose Photoshop -> Preferences -> Guide, Grid & Slices. Move down to the Grid section and opt to have a gridline appear every 32 pixels, with just one subdivision. Click OK to lock in your changes, and then choose View -> Show -> Grid. You’ll now see a blank image file overlaid with a 16-by-16 grid; as you’ve probably guessed, each one of these grid squares corresponds to a single pixel in your final favicon.

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

After you’ve completed your design, duplicate the file as a precaution and open the copy in Photoshop. Choose Image -> Image Size, and then enter a size of 16-by-16 pixels. At the bottom, you’ll see a pop-up menu; choose Bilinear and then click OK. You should now see your favicon at its proper size.

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.

The icon-creation technique outlined above is great for people who feel comfortable using image editors. But even if you’re not, you can make a quick favicon using a number of online resources. These will limit your favicons to 256 colors without anti-aliasing, but it’s a fair trade for the ease of use. Web sites such as the Favicon.ico Generator, FavIcon from Pics, Favicon Generator, Favikon, and others, will create a favicon from images that you upload from your computer. You might also consider the ICO (Windows Icon) file format plug-in for Photoshop that lets you save in ICO format directly within the program. But you’ll need to make sure your original image isn’t larger than 256 pixels high or wide.

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.