Tag Archive | "FavIcon"

3 Ways To Successfully Design Your FavIcon


3 Ways To Successfully Design Your FavIcon

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/

ars technica

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?

Posted in Logo Design ArticlesComments (41)

  • Most Popular
  • Most Recent
  • Most Comments
  • Recent Comments
  • Tags
  • Subscribe For Free