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?
| 
February 20th, 2009 at 1:08 AM
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 :)
February 20th, 2009 at 1:22 AM
Awesome examples! (your title is misspelled). But great stuff!
February 20th, 2009 at 1:28 AM
Hello Rob,
Thanks for you comment however what word has been misspelt?
February 20th, 2009 at 2:03 AM
Very useful tips for designers.Thanks…
February 23rd, 2009 at 2:44 PM
Oh! Thanks for this! I need to get on making a favicon for my site.
February 23rd, 2009 at 5:18 PM
Very nice collection! My personal favorites are the Flickr and Facebook favicons.
February 23rd, 2009 at 8:37 PM
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.
February 24th, 2009 at 1:32 AM
Great tips. The Favicon are great to design. It’s just a challenge to make them clear enougn to understand.
February 24th, 2009 at 3:46 AM
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.
February 24th, 2009 at 4:49 AM
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.
February 24th, 2009 at 5:07 AM
Pretty general tips, but relatively helpful nonetheless.
February 24th, 2009 at 7:09 AM
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! :)
February 24th, 2009 at 12:12 PM
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.
February 25th, 2009 at 2:05 AM
Great post! Fav icons add a touch to websites that say the creators care that extra little bit.
March 1st, 2009 at 1:54 PM
with what do you usually designing these favicon?
March 1st, 2009 at 3:43 PM
Nearly any graphics software will do it however I prefer Photoshop or Illustrator.
March 2nd, 2009 at 8:15 AM
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.
July 20th, 2009 at 3:53 PM
Analyzing logos is a great way to learn about colour balance. Thanks for getting us back to basics.
December 2nd, 2009 at 11:43 AM
I should finally make my favcon.. This article surely helps me
January 28th, 2010 at 10:29 PM
very impressive article! great work!
March 30th, 2010 at 12:09 PM
Love the classic look of Nintendo.