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. Note: this does not work in IE so don’t sit there staring for 5 minutes, it will never happen.
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.
