Technology affects logo design in different ways, one of which is the applications of the mark. Just a short while ago this would mean that designers were responsible for designing a mark that would reproduce well when faxed, while this is still true it has become less of a necessity. One of the new applications that logo designers are faced with that is arguably even more difficult is creating a mark that can scale down to the 16×16 pixel dimensions of a website’s favicon.

What are the options?

There are a number of options that a designer can take when applying a logo design to a favicon. Below are three ways to convert your logo design to a favicon successfully.

1. Show the Full Logo or Optimized Variation

If the original logo is simple enough this is a great option. It is very likely that the original mark is too complex to accurately render at such a low resolution. It is also recommended that the vector mark be adjusted to better fit the low resolution of the icon, for more information see the article Icon Design Explained by icon design expert Jon Hicks.

2. Show a Segment

Often times when the mark is too complex to use in its entirety, a small yet distinguishable portion of it may be used instead. Doing so creates a visual reference to the mark and identity without having to attempt and fit complex detail into such a small area.

3. Pull Away from the Identity

It is also entirely possible that the favicon can be treated as an entirely new design problem. In this scenario it is common to see the overall identity of the company / service / product applied to the favicon in an entirely new way.

FavIcon Examples

Below you will find some examples of the options mentioned above.

1. Full Logo & Optimized Variations

Hick’s Design – http://www.hicksdesign.co.uk/

37signals – http://www.37signals.com/

FANCAST – http://www.fancast.com/

Coudal Partners – http://www.coudal.com/

2. Segments

Ars Technica – http://www.arstechnica.com/

Twitter – http://www.twitter.com/

Nintendo – http://www.nintendo.com/

GOOD Magazine – http://www.good.is/

3. Identity Extensions

Makefive – http://makefive.com/

Facebook – http://www.facebook.com/

Flickr – http://www.flickr.com/

XBOX – http://www.xbox.com/

Have you forgotten about your favicon?

Related posts:

• No related posts (yet).