Pixel for pixel your Favicon is the most valuable real estate on your site

The Art of the Favicon Feb. 22nd 2005
If you’re anything like me – and if you’re lucky you’re not. You have the bookmarks toolbar visible in your browser. And you’ve started doing something subconsciously, giving links that have good favicons higher priority in your in your favorites. I know, I know, content is king. But if he is, then the favicon was the rat fink bastard who killed his brother, so he could take the throne.

A good favicon is something that many sites overlook, but after someone has decided to bookmark your page, it becomes the first thing they experience the next time they visit. Even before the home page loads, you’re given an opportunity to make an impression on the end user. And a favicon that has impact does that in a very subtle but profound way. It draws the users attention to that URL. Many times, I’ve clicked links in my browser just because my eye was drawn to that wonderful little 16 x 16 pixel image.

In fact I would argue, that tiny little .ico file -pixel for pixel- is the most valuable real estate on your site.

In my case, it's actually degenerated to the point that all I have in my bookmarks bar is favicons. I’ve wiped out the text that appears next to them, because I have come to associate the icon more strongly with the site, than its name. (now that’s powerful stuff!)

Telegraphics offers a plug in for Adobe Photoshop, which will allow you to save to .ico format. Although they don’t charge anything, I’d recommend donating a few bucks for giving us such a great tool.

A few rules to keep in mind when making your icon:

Start off using a 64 x 64 pixel canvas, since it is evenly divisible by your target resolution, it will size down smoothly.
After sizing, try using Unsharp Mask, this will help bring out any details that might have been lost in resampling.
Always incorporate colors from your site (you want it to feel consistent with your pages)
K.I.S.S. Keep it Simple Stupid (when working on a 16 square pixel canvas, the simpler the design, the more impact it will have.)
Try to tie in the content so it makes sense within the context of your site; if you have a theme in your design, play off that in the icon.

As an example I’ll go through my thought process on how I developed my favicon. The first thing that jumps out about my site, is the color. (Lets face it, salmon isn’t exactly conventional) So the icon’s color was kind of a “no brainer”.

Next -shape, I have a nautical theme in my site, but one of the most striking details about the photo treatment at the top of the page, is the sun (and the lens flare it’s producing) So, my icon is in the shape of a sun.

Lastly I put an “S” inside the icon, as kind of has a double meaning. The obvious connection is with my name. But “S” was a logical choice on many levels. The letter S could also mean “Sun”, or “Salmon”. Also, the curves on the top and bottom of the letter conform very nicely within the circle.

After you have developed an .ico file, drop this line of code after your <head> tag.

Just substitute the appropriate path for your website.