Ever wonder how those little icons get up in the address bar of your browser (pictured below).  Well, it’s actually pretty easy to do, and it really ads a professional flavor to your site.  It also helps with brand awareness.  Many RSS readers will also pull in the favicon with your feed making your feed more identifiable among others on a page.

What does “favicon” mean? It means favorite icon.  They were originally made to be custom graphics used when people added a site to their browser favorites.  Distinct icons make it easier to find what you want when digging though a long list of links.

So how do you make one? Lets use the iCast Limited logo as an example.  We took what we call our pinwheel off of our logo and made it into a complete circle.  So that was the base from which our favicon was derived.

The specs for a favicon are that they must be 16×16 or 32×32 in dimension.  Most often, the browser will simply size down a 32×32 to the size needed to fit the bowser.  Generally speaking, a 16×16 favicon is restricted to 16 colors.  A 32×32 may be up to 256 colors.  However, it is always smarter to develope your art to the lowest common denominator.  So stick to the 16×16 with 16 colors if you can.

The favicon file format.  Once you have your favicon designed, there is a very specific file format that you must save the art as.  It cannot simply be a jpg or gif.  The favicon needs to be saved as a .ico file.  Also, the file must be named favicon.ico.  That’s required. [Read more...]