---
title: Why Favicons Rule the Internet
teaser: All about favicons in browsers, and examples of fancy favicons.
tags: design
author: Fred Yates
published_on: 2010-03-19
---
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](http://googlesystem.blogspot.com/2008/05/new-google-favicon.html) 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 favicon]](http://google.com) [Google](http://google.com) 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.
* [![amazon favicon]](http://amazon.com) Another strong brand that got
transformed into a favicon. Everyone that knows [Amazon](http://amazon.com),
should be able to recognize that orange arrow. The "a" further assists in
solidifying the Amazon mark.
* [![facebook favicon]](http://facebook.com) Who doesn't recognize the
[Facebook](http://facebook.com) "f" contained in that soothing blue box?
* [![dribbble favicon]](http://dribbble.com) [Dribbble](http://dribbble.com)
is a new great project to help designers share and improve their work. It is
marked with an unmistakeable pink basketball.
* [![good favicon]](http://good.is) 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](http://good.is) "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 favicon]](http://goby.com) [Goby](http://goby.com) 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.
* ![eat your guitar favicon] 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.
* [![fyates favicon]](http://fyates.com) I like to think [my
personal](http://fyates.com) favicon is a great success. I wrote about
branding yourself in my
[post](https://thoughtbot.com/blog/post/277980787/how-to-get-a-job-as-a-web-deigner)
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.
* [![pepsi favicon]](http://pepsi.com) 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](http://pepsi.com) had a year or so ago with their logo
change, everyone should know this brand.
[google favicon]: http://images.thoughtbot.com/ui/favicon-google.png
[amazon favicon]: http://images.thoughtbot.com/ui/favicon-amazon.png
[facebook favicon]: http://images.thoughtbot.com/ui/favicon-facebook.png
[dribbble favicon]: http://images.thoughtbot.com/ui/favicon-dribbble.png
[good favicon]: http://images.thoughtbot.com/ui/favicon-good.png
[goby favicon]: http://images.thoughtbot.com/ui/favicon-goby.png
[eat your guitar favicon]: http://images.thoughtbot.com/ui/favicon-eyg.png
[fyates favicon]: http://images.thoughtbot.com/ui/favicon-fyates.png
[pepsi favicon]: http://images.thoughtbot.com/ui/favicon-pepsi.png
## Special cases
There are even some special cases, two come quickly to mind. The first is our
own [Hoptoad](http://hoptoadapp.com) 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](http://hoptoadapp.com) 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](http://www.schillmania.com/projects/soundmanager2/demo/page-player/), 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](http://pocketsapp.com), 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](http://twitter.com/mkivikoski) informed me of this seriously
awesome [favicon game](http://www.p01.org/releases/DEFENDER_of_the_favicon/). 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](http://www.clickfire.com/favicon-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.