favicon mini-shotLooking for some extra branding on your site? The favorite website icon (favicon) has been around since Internet Explorer 5 so that shortcuts to sites are easier to find in a list of bookmarks. It has expanded since then to appear in the left side of the navigation bar next to the site address. I was recently asked, how do I do that?

Here is the brief conversation of me explaining how to hook your site up with a favicon. I’ll follow it with links and pointers.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

  1. Generate a 32×32 pixel image in your favorite image editor: Photoshop, Paintshop Pro, Paint, Gimp, etc. and save it as a gif image.favicon
  2. Go to http://tools.dynamicdrive.com/favicon/ and upload the image.
  3. Download the generated faviconfavicon.ico file
  4. Upload the generated icon to the root directory (the same directory as default.htm or index.html) of your website using FTP or the file manager tool of your website.
  5. Now refresh your website and you should see your new fav icon!