Favicons Are So Easy To Create. Where’s Yours? (How To)

favicons in tabsFavicons are those cool little graphics that site in the address bar and tab of your browser.

I’m amazed by how many sites either don’t have one, or are using which ever one shipped with their CMS.

Feed ReaderFavicons are a wonderful tool for branding as they provide a visual identifier to help your site stand out from all the other anonymous tabs a reader may have open. They also help your content stand out in feed readers such as Google Reader.

As I’m sure you can see from the image on the right, the blogs with favicons stand out and are far more identifiable than those which don’t have one. Those without favicons get stuck being displayed using the standard blue RSS icon in Google Reader.

Hopefully you can see mine above and have one already in place on your site.

If you don’t have one, here’s how to get one done in 3 easy steps.

  1. Fire up your favorite image editor and create a square image (200×200) and design the icon you’d like. Keep in mind that this will be reduced to 16×16 pixels in size, so don’t make it too intricate.
  2. Upload the 200×200 image to the Dynamic Drive FavIcon Generator. FavIcon Generator will reduce your image the necessary 16×16 size and output it as a favicon.ico file.
  3. Upload “favicon.ico” to the root of your site and then add the following code to the header of your site. It should be inserted before the “</head>” tag.

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

Clear your browsers cache and the cache on your site if you use one, hit refresh and enjoy your new piece of persistent visual branding.

FYI, there are a number of other favicon generator scripts online, but the Dynamic Drive one does the best job of reducing your image while keeping the best quality.