The Favicon

The favicon (Favorite Icon) is an 16 by 16 pixel image used to identify a site in a browser’s history, bookmarks/favorites, tabs, and address bar. This one little image, allows user’s to associate an image to there favorite site, and allow the site operators to brand the site in the user’s bookmark list and address bar.

About a week ago I added a favicon from the upcoming theme to the site, and I wanted take a moment to explain the design behind this little bitty image.

Mad9Scientist.com Extra Large FavIcon, Not To Scale

Mad9Scientist.com Real Favicon

Above is an enlarged version of the favicon, you can see that the favicon has a very limited amount of space to do much of anything. However, I feel that I did a good job of expressing the entire theme in such a small space. Now, lets dissect the image.

Foreground

The most obvious part of the favicon is the capital “M”. The “M” is solid white from the Twenty Century Font Family, in particularly the regular font weight. It is simple but yet elegant – also it reminded me how I usually signed my artwork when I was younger*.

Background

In the background you see the large blue block. The blue block has a four degree rounded corner with an one pixel white border. The blue for the block comes from the blue textured background of the theme – it is actually a random blue from that textured background. The far background of the favicon is also transparent to give it the look that the corners are rounded.

So, with space at a premium when you design an favicon, you must pick your pixels carefully. The next time you see a site with an favicon in your browser, take a moment and admirer the work that must had gone into that little image.

Resources

Need to create an Favicon? Try Dynamic Drive’s FavIcon Generator

* I developed a signature that used straight lines and hard points for my artwork