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.
Favicons
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.
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.
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