Blog Favicon: What Every Blogger Should Know

A blog favicon often comes as an afterthought. ‘I’ll just go ahead and resize my logo and be done with it.’ Right? Wrong! A solid favicon design actually starts with the design of your logo. If your logo won’t look good at 32×32 or 16×16 pixels, it’s back to the drawing board, my friend.
 

Go Small or Go Home

weppot logo size test

A blog is not a corporation. A corporation has many promotional possibilities, many channels where it can show off its identity: tv, magazines, billboards, and, of course, the internet. As a blogger you mainly have access to that last one, so you better maximize what it can do for you.

Imagine you actually get the honor of someone bookmarking you. That’s a pretty rare treat these days, considering search engines do all the filing and fetching for us. But if you do get bookmarked, your blog favicon will be fighting for attention with other lucky favorites on bookmark bars and bookmark dropdown lists. Just take a look at yours now. How many of those sites do you still remember? Are there any that draw your eye? And why is that, you think? It’s probably because of the favicon.

As Paul Rand, one of my design heroes, a logo genius, and the original Mad Man, once said:

So, make sure your memory trigger is doing its job, and no one needs a magnifying glass to decipher the thing it represents: YOU.

Test your logo out for size right now in a favicon converter and see if it’s still recognizable.
 

Keep it Simple

What do you think makes a logo scale down nicely? Simplicity.

When Paul Rand was asked to redesign the UPS logo in the 60s, he didn’t go to a high exec for advice, he went to his eight-year-old daughter instead. When he asked, ‘Catherine, what’s this?’ She confidently replied, ‘That’s a present, Daddy’. That’s the kind of assurance you need from your blog favicon.

UPS Logo
The simpler your image, the more recognizable it will be in a smaller size. Start with a simplicity of concept and then create your layers. Choose fewer colors, and simple clear shapes. While you design, keep asking yourself: can this be simpler? What would happen if I remove this circle or that line? The rule of thumb for good logo and especially favicon design is still:

 

Contrast is Your Friend

At such a small size contrast is the most important thing. When you fine tune your favicon, look out for the following elements:

Shape Contrast

Keep your shapes different enough so they can really stand out.

Atari Logo: Size Comparison

Atari Logo: Size Comparison


The Atari use of mirroring technique is a good way to introduce contrast between shapes, since they will be exactly opposite.

Color Contrast

In a simple classically shaped logo, like this circle used for Pepsi, a bold use of color contrast helps to make the logo unique.

Pepsi Logo: Size Comparison

Pepsi Logo: Size Comparison


You can see that even two simple dabs of color stand out in a small format as long as they are different enough.

Positive-Negative Space Contrast

Negative space is basically the shapes that are formed in the background as a result of the main shapes appearing in the foreground of your logo.

Chanel Logo: Size Comparison

Chanel Logo: Size Comparison


The Chanel logo is a good example of this kind of contrast. You can clearly see the shapes in black carved out by the white ones, which makes the whole thing pop.

And don’t forget that your favicon will appear on a usually grey background of the browser window. So check it to see how it fares on top of grey.

Dare to be bold to achieve plenty of contrast and interest, and then turn it down a notch to still keep it tasteful.
 

(When all else fails…) Go for the Face

Pepe from The Simpsons
Have you ever scrolled down your list of bookmarks and suddenly discovered a face peering back at you? Whoomp! There it is. In full effect. You can’t deny the inarguable appeal of the face-icon. It’s an especially attractive option to bloggers, because more often than not a blog is a personal thing. It’s a reflection of your style, tastes, and what you stand for. A face also helps to make a connection with your readers. It says ‘There’s a real person behind all this content, and she/he looks like this.’

Forgive me for saying this, but what if your face doesn’t appeal to everyone? A logo is abstract, it leaves room for people to attach their own associations to it. More importantly, it gives you the freedom to attach the meaning you want to it.

From a purely graphic perspective, a photograph of a face is also too complicated as a graphic symbol. It’s not always recognizable because of reduced contrast and a large amount of detail jam-packed into a small space.

Here is Pepe from our feature image at 16 x16:
Mini Pepe

Are his charms still doing it for you? Didn’t think so.

So, if you want durability and legibility, don’t go for the face. Your face can always make a guest appearance on Twitter or Facebook to take care of the Public Relations side of things.

Here’s another Rand quote for the road:

A logo is more important in a certain sense than a painting because a zillion people see the logo and it affects what they do. It affects their taste, it affects the appearance of where they live, it affects everything.

These words have never rang truer than today, when your own personal symbol has more potential viewers than ever before.
 
 

Leave a Reply

About Alicia Kolesnikova

Blogger & blogging advocate. An avid WordPress explorer and occasional shutter release pusher. Follow me on for extra blogging tips.

Leave a Reply