Why Favicons Rule the Internet

Once upon a time, back in Internet Explorer 4, Microsoft produced something great (this is not a joke). They decided that when you bookmarked a favorite in your web browser an icon should appear next to its name. On a day sometime in or around 1997, the glorious favicon was born. Every browser since then has supported favicons, in the widely supported .ico format. Many browsers are now supporting them in other formats such as animated .gifs, .pngs, .jpgs, and more. I’m here to talk to you about why they’re great, and how this is probably Microsoft’s greatest contribution to mankind, ever.

Huh, what is a favicon?

For those that don’t know, a favicon is a small square image (usually 16x16 pixels) that can be seen in places like your browser URL bar, bookmarks list, browser tabs, and RSS feeds.

Why is such a small thing such a huge deal?

The biggest reason why favicons are so important is their ability to help users identify their links, tabs, and feeds better. That little 16 pixel icon is such a helpful visual cue, I often go as far to say that no design can be complete without a favicon. As a designer I feel that everything in my power should be done to facilitate the user in finding their way around the product. If something as simple as a favicon can be such a helpful tool, why on earth would you ever leave it out? To drive my point home even further, I remembered this post from Google’s blog about their extensive research with over 300 favicons.

Some examples

This isn’t intended to be one of those sweet list posts but I can’t talk about favicons without showing some that I think are really great. A great favicon to me doesn’t have to be stellar visually (although that’s usually nice) it only has to assist the user in associating the mark with the name. My test to decide if a favicon is successful or not is if you can identify the site it belongs to by seeing only the favicon. Needless to say, this only applies if you’re already familiar with the site. There are obviously thousands of great favicons out there but I picked a few from my bookmarks or recent sites that I’ve visited.

• Google has had their share of bad favicons in my opinion but this current one knocks it out of the ballpark. You can relate all four of Google’s colors and their famous lower case g to the Google brand with ease.
• Another strong brand that got transformed into a favicon. Everyone that knows Amazon, should be able to recognize that orange arrow. The “a” further assists in solidifying the Amazon mark.
• Who doesn’t recognize the Facebook “f” contained in that soothing blue box?
• Dribbble is a new great project to help designers share and improve their work. It is marked with an unmistakeable pink basketball.
• I usually don’t like favicons that are a plain, unstyled letter, on a solid background (even though I’ve done it myself before, yikes) but occasionally it works. However, the Good Magazine “G” is one single letter favicon that works for me. It works because their entire brand is so simple and revolves around the plain type logo.
• Goby is a new way to find stuff to do in your area. I fell in love with their site design when I saw it at a startup conference here in Boston, but the fish in their favicon is a huge winner in the cool category.
• A much more personal favicon, so this one succeeds in different ways. This is the portfolio of my friend Jeff Daley, and that is very obviously a photo of him shrunken down and optimized for favicon dimensions. When I see this favicon I know the site can be nothing other than his personal slice of the web. To further reinforce this form of favicons, tumblr has implemented a system that turns your avatar into your tumblog favicon. there’s no better way to identify someone’s site with their face on the tab.
• I like to think my personal favicon is a great success. I wrote about branding yourself in my post about getting a job as a web designer and this favicon matches a tie I often wear to interviews and meetings, my logo, and my site colors.
• My favorite of the bunch, just behind Goby because it’s such a beautiful use of the 16x16 pixel space. With all the publicity Pepsi had a year or so ago with their logo change, everyone should know this brand.

Special cases

There are even some special cases, two come quickly to mind. The first is our own Hoptoad favicon. It has been around for over a year now and it’s time to let the cat out of the bag for those of you who don’t know. If you watch intently with a little patience (about 43 seconds) the Hoptoad favicon will give you a lively blink or two.

The other cool favicon I know about, is from a project called Sound Manager 2, and is really impressive. It changes your favicon to show the audio levels of an audio file playing in your browser. I honestly don’t have a clue how it works, but definitely impresses me. We used it last year during Rails Rumble in our Pockets App, so when you played back a voicemail it displayed the levels of the voicemail as it played. Ironically, i wasn’t able to get this to work in the browser that gave birth to the favicon, IE, as only browsers such as Firefox, Chrome, and Safari have improved upon favicon handling.

Update: Mike Kivikoski informed me of this seriously awesome favicon game. It plays a remake of the classic arcade game Defender in a favicon on that site. Definitely check it out. Needless to say it only works in a few browsers, I played it in Firefox 3.6.

Creating a favicon

If you don’t know how to create a favicon and implement it on your site check out this great tutorial. If you have any cool favicons, especially any that are more than just static images, leave a comment - I always love seeing new favicon brilliance. As always, thanks for reading and let’s keep our fingers crossed… maybe IE9 will roll out some great new revolutionary tool that rivals the creative genius they showed with the favicon.