Designing Your Website’s Favicon For Browsers

In another article I talked about the importance of a browser favicon for your business’s identity and branding. Here I look at some design considerations when creating a favicon for your website.

The key is to take into account the small size – a mere 16 x 16 pixels – and the square proportions.

That means, in most cases, that simply shrinking your logo is not going to work. Either the icon is too detailed to be able to distinguish its parts when shrunk or the proportions of your full logo mean you have to shrink it even more just to fit into the favicon square – or both.

This is the logo for my friend, business communications consultant and author, Angela Crocker.

Now, we knew that shrinking this to 16 x 16 px would make her name illegible. Plus the “& Associates” below the line made it too tall and that would require wasted white space to make the whole thing square.

So all writing was removed, and Angela’s name was replaced with her initials “AC.” On the left you can see how it turned out in the browser tab – you can barely read the letters and the outer ring of blue looks broken up.

So finally the letters were thickened and the outer ring removed. The result? She keeps the circle of her logo, keeps her colours, and includes her name indirectly, while being able to clearly see the favicon in the browser tab.

I took a similar route with See How Support. I made a small square with my primary colour and used just the intials of See How Support.

If you have an image as part of your logo, another option is to remove any wording and fit the image into a square.

If the image is very much wider than it is tall, then consider trimming the image to show only its most distinguishing element. For example, if you have an animal in the logo, use only the head portion.

If the image has any complexity that’s going to be lost or confusing when shrunk, make a simplified outline of the image. In the case of the animal, get rid of shading or lines and have a flat colour.

If you don’t have a fully-coloured square image, like the SHS icon, make the background transparent so it’ll look good with any background.