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.
October 5th, 2010 at 9:59 PM
Nice examples. I love to design favicons. Now these tips will definitely help me out. Thanks for the post.
January 23rd, 2011 at 8:53 AM
Very nice.
April 8th, 2011 at 11:26 AM
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.
August 28th, 2011 at 2:00 PM
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.
September 30th, 2011 at 3:00 AM
Thanks for the tips! very helpful for my
marketing services designs. Do you have any suggestions?
December 11th, 2011 at 5:25 AM
Very good collection of favicon website.
January 14th, 2012 at 11:48 PM
Nice favicon examples!
February 13th, 2012 at 6:03 AM
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.
August 1st, 2012 at 10:42 PM
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.
October 18th, 2012 at 4:11 AM
This article has helped me so much! has opened my eyes to help me with my blog. Many Thanks
April 10th, 2013 at 9:16 PM
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!
June 11th, 2013 at 12:43 AM
wow !
Great article. I really enjoyed reading this. logo design
June 13th, 2013 at 2:29 AM
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.