we shall know them by their favicons

God is in the details: so said Mies van der Rohe. Which in his case meant that the door handles were just as important - if not more so - than the atrium. And it's often what marks out great graphic designers as well - that fanatical attention to the detail. But, it has to be admitted, that commitment can sometimes be lost on clients.

Because the tiny details are the things that happen at the end of the process. And it's all too easy to dismiss them as unimportant, or too irksome if we're up against deadlines and budgets. But you can bet your bottom dollar that the man in the street will notice, even if only subconsciously.

Now everyone who uses the web will use a web browser and will use bookmarks, won't they? And when they do, that tiny piece of detail that they'll see every time they visit a site, or scroll through their bookmarks, will be the favicon. And that's the thing that will - eventually - stick in their minds. Which makes it all the more surprising that they're often given so little thought. Or perhaps it's us designers, thinking "well what I can do with 256 pixels?".

But very often they're not thought about at all. Which is why there are so many websites which don't have them. And then you get those (mostly household names, mind) that think it's just a matter of sticking their logo in the box - a big, big mistake. You want proof? Well try these for size:

Volvo

Orange

Tate

BBC

And consider what happens when you take a really great logo - one that 'puts a smile in the mind' (once you know the arrow's there):

Stick it on a favicon and look what you get:

When all the time the most obvious solution is staring you in the face.

And goodness knows what was going on over at Random House the day they thought that this might do the trick:

Which is a surprise, because publishers have had years of practice with this sort of thing. Because they had to find ingenious ways to make there mark when all they had was the width of a book spine.

Now the designers among you will probably know that this is a front cover designed by David Pearson:

But there's just one little thing (well lots of them, actually) that tells you that this is a book published by Penguin.

A reminder to us that Jan Tschichold certainly knew his stuff.

But where are the good favicons? I hear you ask. Well, not surprisingly, often on designers' own sites or blogs. Here are just a few:

If you want to know more about favicons and how to install them, you can do some reading up just here.

And if you want to create your own favicon (once you've got your artwork ready), then you can do that for free just here.

Comments

[Daniel]

You reminded me to fix mine! Annoyingly for us TypePadders, there appears to be a separate favicon file for RSS feeds - so we're stuck with the TypePad logo in readers.

Agreed with you for the most part, except for your examples of good favicons. How is the "things" one any better than, say, the Tate one?

[Ben]

Yeah - the Orange one is good, Shirley?

My friends at Dopplr have a very good favicon. It changes colour every time you add a new trip.
http://www.dopplr.com/traveller/BenTerrett

Maybe it's just my friends that have good favicons?

(I put Shirley instead of surely to save you the trouble of saying 'don't call me Shirley'.)

[Tom Harle]

I only spotted the arrow a few months ago, I almost don't see the type now, which I find kind of weird.

I guess with the icon thing, another consideration would be transparency - I notice the white outline on the twitter favicon has a jagged edge around it when you hover over it in a menu, presumably the anti aliasing (or not) in the gif file?

[Richard]

I think the Tate and BBC ones work. Or perhaps it's just that they're so recognisable that they don't have to work too hard? Whichever the case you're made me feel crap about not thinking about mine. Damn you davidthedesigner, Damn you!

And thrice, Damn you!

[David Airey]

All Orange have to do is drop the white text from their orange square, and it's perfect.

FedEx should simply split a square in half using the two colours from their logo.

[davidthedesigner]

Daniel (and Richard) - beauty is in the eye of the beholder, as they say. My point is that those I have cited as being 'good' have started with a 16 pixel x 16 pixel canvas and then worked within those confines, whereas the 'bad' ones have simply shoehorned their logos into the space.

Ben - the only possible riposte to the Shirley gag is nice beaver.

Tom - I don't know, is the answer to that one.

So is this a man thing, then? Perhaps we could persuade the BBC to give us a series: 'Top Pixel' with Ben in the Richard Hammond role. Me? I'll be The Stig.

[Mat]

Good site for creating them:
http://www.degraeve.com/favicon/

[kristarella]

Yup, they're not easy to make. I like that little pencil one. Same or similar to LiveJournal?
I wrote a post about favicons (http://www.kristarella.com/2008/05/the-art-of-favicons/) a little while ago myself.

[Steve - Eightyone Design]

Great Article - It made me go and check mine as I couldn't even remember what it looked like! I do think you are right in saying that it is very overlooked and if designed properly can be a great bit of branding which could make you stand out in a list of bookmarks.

[Richard, Peacock Carter]

I think the BBC and Tate icons work well, but the Volvo one is pretty bad!

[Doug C.]

Just found this article. You certainly nailed it - the favicons, that is. I spent a lot of time developing my own and I agree; it takes more than simplicity to make a statement.