Log in

No account? Create an account

What Makes a Good Favicon?

Smashing Magazine have an article about favicons, the little blobs of colour that show up next to the URL in the address bar of your browser and in your favourite/bookmark list. They’re comparing them to 404 pages, saying that just like 404 pages they’re important but often get overlooked. The article has a long list of favicons that they think work well. Unfortunately they mostly don't say why.

What do they do?
The task of a favicon is to give the user a visual reminder of a site. It does this in a 16 by 16 pixel format, so it can only show 2-3 letters clearly. In other words, you’re better off using a shape and colour that reminds users of your brand than going for text. For most people brand=logo but, as you’ll see in the discussion below, some brands are a bit more sophisticated than that.

My browser

Browser chrome with favicons

Favicons in my bookmark toolbark
Above is the top chrome on my Firefox. To get my bookmarks to show up in the browser chrome, I’m using the Bookmarks Toolbar Folder in Firefox. It’s not an extension, it’s part of Firefox and has been for as long as I’ve used the browser. Terrifically useful for pages you visit over and over again.

Starting from the left, the blue Transport for London favicon is good. It’s got the colour right and it the shape is easily identifiable.

Same applies to the Norwich Union favicon. If you’ve seen the logo, the favicon will jog your memory to associate back to it. Perhaps the yellow spire could have been a bit more prominent. After all that’s what people focus on when they see the life-sized logo.

Boxes and Arrows is an information architecture site. Ironically they’re icon isn’t all that great. For one thing the original logo is orange so the favicon is missing that memory cue.

Unfortunately the site logo is trying to be literal, it shows an arrow inside a box, but the rounded corners mean that the square shape doesn’t immediately make users think of boxes. For most people boxes have square corners. Obviously it’s not the favicon designer’s fault that the logo isn’t up to snuff. But when that’s the case, making use of the colour cue is even more important.

Besides, nobody except a designer is going to squint at a favicon and try to make out what it shows. Most people will only see a coloured blob, so the colour is very important.

Jesse James Garret writes about information architecture. Unfortunately the favicon has nothing to do with the logo found on his site. The logo says “jig.net” because that’s his domain. The favicon shows his face in blue. It’s basically a total failure. The colour is more or less right but with the shape misleading to that degree, it’s not enough.

The London Weather favicon belongs to the Met Office. This is a good example of what not to do. They’ve just shrunk their logo down to 16 by 16 pixels and stopped there. If they had taken the time to get rid of the unreadable white text, this would have been a good favicon. The blue under the green waves would have registered as blue. That’s good because their whole masthead is that blue colour, so it would have been a strong reminder of their site.

Next we have Good Technology. Their favicon leads with an inexplicable colon but otherwise the shape of the letters is exactly as the shape in the life-size logo. The olive green colour is also strongly associated with their brand as expressed on their site. The fact that the logo on their site is pale blue doesn’t matter. Most people won’t see the site logo anyway because it’s at the bottom of the page. As a favicon this definitely works, although they could lose the colon. Good work, as you'd expect from a digital agency.

Finally I have two favicons for del.icio.us. Yes, I’m aware that I can add the extension to the browser instead. I just haven’t done that yet on this browser. The good thing about showing the bookmarks here is that they’re obviously not working. Look at the tab below. It’s showing the familiar blue, black, white and grey squares of the del.icio.us logo. How they managed to get their favicon to not work is beyond me. But it shows that even the pros sometimes get details like this one wrong.

Speaking of favicons, how come del.icio.us still doesn’t display favicons in its bookmark listings?

Favicons in the tab bar
In the tab bar at the bottom of the image, you can see some of the sites that I’ve visited today. The first is the easily identifiable Yell logo, letting its fingers do the walking.

The last one is my own attempt, for my site Mjausson.com. The association between the M and the first letter in Mjausson works well but if you click through to the homepage, you’ll wonder if you ended up in the right place. You’d expect something in a range of cool, pastel blue tones but the page is a sunny yellow. There is also no logo on the page, so the feedback loop between the favicon and the site remains unclosed. Not good.

I based the favicon on the header I used for the pages from 2004. Total blunder. Since the favicon and LiveJournal icon that it is based on, are the closest thing to a logo I have, if I had the time, I’d probably rework the homepage so that it hews back to the logo. Then the favicon would be doing its job -- reminding the user of the site.


Okay then, I guess pirate journal should have a skull and crossed quills.
With the current logo, I'd say a skull with crossed swords. However at 16 by 16 it will be impossible to see what the thin, crossed things are. It may be better to leave them out completely or just sort of hint at them.

I think something like this would work:
Pirate favicon