Anatomy of A Favicon

The Favicon, the small image at the top of the web browser, usually no more than 16x16 pixels, meant to identify a brand quickly and easily. This is usueful especially for users like me who have a million tabs open on my browser. It's often displayed next to the page title, sometimes in bookmark lists or the browser's history page, so it can really become a key component of a brand. It's standard shape is square with the ideal use being simple, high-constract graphics. The challenge, as always, when going small is clarity, readability, and reconition. How do you do this with so little detail?

The key, I find, is honing in on the essence of a brand. If you had to distill the message down to one or two key points, what would that message be? The Favicon should reflect this using typography that refers back to the brand standards and colors that do the same. Too much detail, and the whole thing becomes an unreadable mess. Not enough detail and it becomes boring, indistinguishable from the next favicon or leaves your website feeling poorly designed or not completely polished.

Favicon Design Tips

Keep it Simple. Intricate details will get lost. A clean, minimalist design is more effective.

Make it recognizable. Favicon should be a simplified version of the logo or a visual element that represents your brand. It hsould be easily identifable at a glance.

Use High Contrast. High Contrast colors help at small sizes.

There are plenty of favicon generators out there for the DIYers, but a designer can include this as part of your logo package.