How to give your web site a Favicon (favorites icon)

Matt Stauffer

You might have noticed that your browser shows a little favorite icon when you visit some web sites, but not for others. If you have a web site, you might wonder how to change that–especially if you use a host like Bluehost or Hostmonster, which add their own (sort of ugly) icons to your site.

That little icon is called a favicon, and it’s a tiny little graphic you place at the root of your web hosting account. You can also link to it using the following code in your header (if you don’t have access to your root directory):

<link rel="shortcut icon" href="http://example.com/whateverdirector/myicon.ico" />

The icon is traditionally a 16px by 16px .ico file, which is supported by the most browsers. However, browsers are slowly ramping up support for other file formats. For getting started with favicons, stick with a 16px by 16px .ico.

There are two easy ways for you to get started: Either create a 16×16 gif in your editor of choice and import it into favicon.cc, or draw it yourself pixel-by-pixel at favicon.cc.

  1. (optional) Create your image in your favorite image editor and export as a gift. Visit favicon.cc and import it using the “Import Image” button.

  2. Open favicon.cc and draw or tweak your favicon. You’re currently seeing a blown-up representation of the image, but you can also see a preview in the Preview pane below.
  3. When you’re ready, click the “Download Favicon” button in the preview pane. You’ll get a custom favicon.ico downloaded to your computer.
  4. Upload that file to the root of your web site. So, for example, I uploaded mine so it was http://www.staffhacker.com/favicon.ico .
  5. That’s it! It might take a while for your browsers to recognize it’s there, but you’re ready to go.
By Matt Stauffer | Posted: Aug 25, 2011
Category: Miscellaneous | Permalink | Post a comment | Trackback URL.

One Comment