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/

hicksdesign

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

37signals

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

fancast

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

coudal

2. Segments

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

ars technica

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

twitter

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

Nintendo

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

good

3. Identity Extensions

Makefive – http://makefive.com/

makefive

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

facebook

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

flickr

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

xbox

Have you forgotten about your favicon?


Spread The Word:

| Stumble | | Delicious | Float | Digg | Bump

Related posts:


21 Comments For This Post

  1. agustin ruiz Says:

    Nice tips, altough a little to general. I love designing favicons, it’s a real challenge sometimes!.

    For my site i used a part of my octopus logo, only it’s eye :)

  2. Rob Says:

    Awesome examples! (your title is misspelled). But great stuff!

  3. Jacob Cass Says:

    Hello Rob,
    Thanks for you comment however what word has been misspelt?

  4. kiran Says:

    Very useful tips for designers.Thanks…

  5. Victoria Says:

    Oh! Thanks for this! I need to get on making a favicon for my site.

  6. Jake Mates Says:

    Very nice collection! My personal favorites are the Flickr and Facebook favicons.

  7. Vincent Says:

    Nice list, I find it one of the most fun jobs at the end of a project; creating the favicon.

    I don’t like the Xbox favicon, I wouldn’t recognize it without the big brother next to it. Tthe X on itself, without the circle, would be more suitable as a favicon.

  8. Rosanna Says:

    Great tips. The Favicon are great to design. It’s just a challenge to make them clear enougn to understand.

  9. Cristhian Bedon Says:

    Desiging a favicon for me is a bit of a hassle since its hard to try and make it clear and visible. But great list of examples here.

  10. David Millar Says:

    I love these examples. 99% of the time when I see a blog post with favicon examples, they all break the rules/guidelines that the post established in the first place. Good stuff here, and makes me want to redesign mine.

  11. Aetoric Design Says:

    Pretty general tips, but relatively helpful nonetheless.

  12. Rob Russo Says:

    Good post. A great favicon is such a small, but effective way to further the brand. I love the simplicity utilized by twitter, facebook and flickr.

    In other news, good luck with the new venture, Jacob. You are staying busy these days! :)

  13. Zinni Says:

    Thanks everyone for the supportive comments.

    Vincent, The Xbox favicon actually represents the “ring of lights” found on the system itself, which is why as an extension of the identity I consider it to be successful.

  14. Matthew Says:

    Great post! Fav icons add a touch to websites that say the creators care that extra little bit.

  15. wiswakarma Says:

    with what do you usually designing these favicon?

  16. Jacob Cass Says:

    Nearly any graphics software will do it however I prefer Photoshop or Illustrator.

  17. Jenni Says:

    Very cool!! I love favicons, especially when I bookmark pages from a site. Makes it easier to find the sites with the best articles, plus great for imprinting another branding element in one’s brain.

  18. Calgary Graphic Design Says:

    Analyzing logos is a great way to learn about colour balance. Thanks for getting us back to basics.

  19. Logon Says:

    I should finally make my favcon.. This article surely helps me

  20. logoziner Says:

    very impressive article! great work!

  21. Muxx Says:

    Love the classic look of Nintendo.

2 Trackbacks For This Post

  1. links for 2009-02-23 | This Inspires Me Says:

    [...] 3 Ways On How To Convert Your Logo Design To A FavIcon (tags: favicon icons graphics logos) [...]

  2. Favicon - Que Es Y Como Hacerlo? | rEVOLution52 - El Inicio De Muchas Cosas Por Hacer. Says:

    [...] Post Basado en: 3 Ways To Successfully Design Your FavIcon [...]

Leave a Reply

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

LDB Flickr Pool - Join & Upload Your Own!