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:


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

  22. logo templates Says:

    Nice examples. I love to design favicons. Now these tips will definitely help me out. Thanks for the post.

  23. gadarf Says:

    Very nice.

  24. Kelly Says:

    Really nice article. I struggle to find good simple logo designs like the popular ones shown above. There is just so much out there that is busy and crazy and over done. Did find one logo site that others might be interested in though! Found it quite inspirational.

  25. Robert Says:

    Interesting, I recently did my first favicon and had a rough time getting it right. The idea of using a segment is a great idea, as many logos will not compress into that small little favicon space.

  26. Gina Says:

    Thanks for the tips! very helpful for my
    marketing services designs. Do you have any suggestions?

  27. semanticflow Says:

    Very good collection of favicon website.

  28. nativeseo Says:

    Nice favicon examples!

  29. APNA JAHANIAN Says:

    can you help me that which application is used to open IA and Victor files. I want to use these in my logo design I am using adobe photoshop 7 for logo design.

  30. iDesignIdea Says:

    Designing professional websites these days aren’t done without favicon. Every website owner and website designer should have this in mind. There are so many nice examples for favicons, you also had some of them here.

  31. Jamie Evans Says:

    This article has helped me so much! has opened my eyes to help me with my blog. Many Thanks

  32. Paul Says:

    I tried to design a favicon myself, but I found it really difficult. It is best to use a designer, I found a nice offer on http://adsurf.net and they did it for me for pocket money really. You can also try some freelance websites, I had quie a lot of success with them. Thanks for the post!

  33. Ava Stewart Says:

    wow !
    Great article. I really enjoyed reading this. logo design

  34. Lookboard Says:

    Designing professional websites these days aren’t done without favicon. Every website owner and website designer should have this in mind. There are so many nice examples for favicons, you also had some of them here.

  35. Karthikeyan K Says:

    Nice Tutorial.. Now I know how to create my own favicon :)

  36. PatrickWolcott Says:

    Cool!

4 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 [...]

  3. postcard printing online fast Says:

    your blog post writing skills to the…

    next level.if you’ve never heard this before then probably the best piece advice for your blog i can give you is that your content is king. ok then, what kind of content you may be wondering, and what is considered to…

  4. house extension costs n sydney Says:

    posts – write shorter paragraphs7) show personality….

    i really write the way that i talk. i’m not trying to impress anyone. i just want people to get to know the real me, because the real me is who they will be doing business with. you get a better…

Leave a Reply



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