Responsive Websites, Avatars and Favicons

A. Michael Shumate

A. Michael Shumate

Responsive Websites
Many of us now do a significant amount of web searching on tablets and smart phones, not just our desktop or laptop computers. Hence the current pressure to have “responsive websites,” sites that change the size and organization of a page’s content, depending on the device used for viewing it.

Even though the resolution of these screens has increased, with more pixels per inch, the inescapable fact is that these screens are smaller. Therefore their content will be viewed smaller. One needs to think of this reality when designing an identity.

Social Media Avatars
One would have to be living on another planet to not know how important social media is, not just for individual people today, but for all sorts of companies as well. Facebook, Twitter, Pinterest and Instagram are the most popular, but the list goes on.

Social media allows the user to have an avatar, a visual portrait of the person—or for companies, their logo. An avatar can be nice and big on your own page in these sites, but the avatars on your notices, tweets or posts going to followers are quite small. As of this writing, here are the typical sizes of the big four social media for avatar dimensions for posts or tweets:
Twitter 42 pixels square

Pinterest 40 pixels square
FaceBook 32 pixels square
Instagram 30 pixels round

Obviously, clear and simple logos survive best in this social media arena. Logos without any of the Seven Deadly Sins are essential with such a limited number of pixels.

Avatars from Instagram posts on an iPhone. The top three rows are successful. The bottom row all suffer from not recognizing the size that avatars will be viewed on posts. Utah Jazz’s poor logo does not improve when reduced. Lippincott’s avatar shows the problem not using a condensed font for long signatures and of using all caps. Calvin Klein’s identity should be flexible enough to let the words to be stacked, which would have given critical size. Godiva doesn’t understand that making things smaller that they need to be doesn’t work for avatars. Real Canadian Superstore could have stacked its logo and signature or even used its logo alone for greater clarity. Mitsubishi’s logo works well at this small size but the signature is marginal and the accompanying type is illegible and should have been omitted. Faces used as avatars are best close-cropped, and even then, are often only recognizable to people who already know the person.

We’ll end our journey with the humble little favicon (fav rhymes with have), short for favorite icon. These tiny nuggets of branding design can (and should) be part of every commercial website. When we visit any website that has a favicon, it will appear at the top of the browser window or tab of most browsers. Then if we bookmark a Web page, that site’s favicon is stored along with the link and the bookmark’s descriptive text. When we scroll through our Web bookmarks, the favicon is the first thing we see, followed by the descriptive text.

How cool is that? You get to plant your favicon brand on the machine of anyone who bookmarks your site. The only problem is that these little visuals are only sixteen pixels square. That’s not much to work with. And only logos free of the Seven Deadly Sins have a hope of converting directly to a clear favicon.

The ideal favicon would be a miniature of the company’s logo, like those for ABC, Microsoft, Facebook and Apple. The next best thing is an important portion of the logo, or the first initial of the company wordmark or signature, like those for Google, BIng or Amazon.

Favicons appear with our saved web bookmarks and are powerful little bits of marketing,
only 16 pixels square. Column 1 are miniature versions of their very effective logos. Column 2 shows favicons derived from a part of their identity. Companies that only use a signature end up having to make, in effect, a micro-logo for their favicon. Column 3 are ineffective favicons for various reasons. The first several are trying to show something too complex for a 16 pixel square. Others have weak contrast.

It’s nearly impossible to make a good favicon from a poor logo. Parts or lines that are too fine, lack mass or contrast are all accentuated when trying to shrink the logo down to 16 pixels square. What are a company’s options then?

Not using a favicon at all?

Or, admitting total defeat, adopting a totally new micro logo that has no resemblance to the original identity?

Who would want to do that?

You’d be surprized at the number of companies that have done just that.

Here are the web browser tabs, URLs and identities of seven companies, right off their own websites, pixel for pixel. 1 & 2 have good, solid logos that, in turn, make good, solid favicons. 3 & 4 use a recognizable part of their identities, a reasonable alternative to the whole identity. 5. used the solid colors associated with their brand to good effect. 6. used their whole wordmark but it is only five letters long each, which is the outside limit for legibility in a favicon. 7. Xerox should have done the same thing instead of a reversal in a solid block. The extra couple of pixels they used to reverse instead of a full width positive signature cost them some critical legibility.

Less is More
This is an age-old maxim in so many areas of art and design, as has already been mentioned. It is not just a good idea in favicon design, it is imperative.

The websites for Kentucky Fried Chicken in the US and in Canada give us an opportunity to compare favicons. Both the US and Canadian favicons show the familiar bucket. The US version also tries to show the bucket full of chicken, whereas the Canadian version only shows the bucket flat on. It is very easy to tell which is the clearer of the two.

Observe that it only takes a few pixels to render the chicken, but it is enough to make the rest of the bucket considerably more ambiguous.

The lesson?

In favicon design, reaching for less can make it better.

What Do 16 Pixel Images Teach Us?
One might suppose that the latest modern fads and fashions of logo design would be most compatible with our latest technology and media. But the opposite is true. Over an over we see that the core principles of logo design we’ve spoken of in this book are not only valid today, but give better results with today’s newest media. What could be more modern than a favicon?

Far from being passé or old-fashioned, these principles are fundamental, even timeless . As we’ve stated before, trends are temporary and, in the end, will be replaced. That is the very meaning of the word trend, isn’t it? So avoid trends—especially just the outward trappings of trends—at all costs.

Instead, let us seek in our corporate identity design that which aspires, at least, to permanence.

Adapted from Logo Design Theory: How BRanding Design Really Works

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Share on tumblr
Share on stumbleupon

Leave a Reply