Smashing Magazine
50 Fantastic Favicons: Episode 9
Every now and again we showcase fantastic favicons, those tiny pieces of art that you’ll find in your browser’s address bar or when rifling through your bookmarks. These little gems are important because they serve as visual indicators to help visitors easily identify content in their browser. That aside, favicons are just nice to look at, and way too many websites don’t make use of them. We want to change that, which is why we are presenting what is now the ninth episode in our favicons series: a small article with tiny images and fast loading time… for a change.
We’ve written numerous articles about favicons in the past. If you’d like to find out more, feel free to look at these posts:
- Favicon Episode 8
- Favicon Episode 7
- Favicon Episode 6: Black, Abstract and Hand-Drawing
- Episode 5: The Delicate Beauties
- Part 4: Creative Favicons: Tiny Artwork
- Part 3: Creative Favicons: When Small Is Beautiful
- Part 2: Inspire Yourself: More Creative Favicons
- Part 1: Inspire Yourself: 50 Remarkable Favicons
Any picture’s merit is debatable. But notice that these favicons were chosen not simply for their beauty and originality; it was important to us also that each fit the overall website design and logo. Pay attention to the details of the design.
All favicons are linked, of course, to the websites from where they were taken (if they still exist). Click on them to get more insight into how favicon design relates to overall layout design. The order here does not indicate any ranking.
 | Tableau Public |
 | Gnash Project |
 | Top Roundups |
 | Elastic Tabstops |
 | i-on interactive |
 | Arc Technology Group |
 | Kodingen |
 | Sound Light Vision |
 | Highcharts |
 | Faces |
 | Photoscape |
 | London Reviews |
 | Open Faces |
 | RocketTheme |
 | Techbridge |
 | Soft eXpansion |
 | Screwturn Wiki |
 | Nimbupani |
 | Spoonjuice |
 | Universität Freiburg |
 | Paragon Software |
 | iMasters |
 | TechEBlog |
 | FitBit |
 | DropBox |
 | Axialis |
 | Swebapps |
 | Acquia |
 | Snipt |
 | MIX Online |
 | Second Market |
 | Open X |
 | Filemail |
 | 55Eleven |
 | Onehub |
 | Projectbubble |
 | Projektwerk |
 | Medienlab |
 | Iconshock |
 | Splitweed |
 | Goby |
 | M1 Design |
 | PageStat |
 | Commadot |
 | Babbelblog |
 | Tammy Hart |
 | Toufee |
 | Lion Framework |
 | High Beam |
 | Mixxt |
 | CMSExpo |
And finally, all the favicons in one picture:
(al)
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
- 68 Comments
- 1
- 2
March 14th, 2010 9:48 pmThis is also sweet collection.
- 2
- 3March 14th, 2010 3:42 am
Sweet collection. Favicons are something that alway seem to get left until the last minute or entirely forgotten. Thanks for collating these.
- 4March 14th, 2010 3:52 am
Great Favicons!
I’m loving this one at the moment http://alanvanroemburg.com
Also the http://grainedit.com/ icon is very nice and clean.
- 5March 14th, 2010 4:00 am
Nice collection, although would have been nice if you added links to them :)
- 6March 14th, 2010 4:17 am
Nice one :)
Hehe I love this one in http://www.rendu.lt nice big black heart with some orange stroke. - 7March 14th, 2010 4:54 am
Thanks for putting Project Bubble in there! I’m honoured :)
- 8March 14th, 2010 5:07 am
Fantastic icons, it’s amazing how much some artists can fit into 16×16 pixels. They really put my effort to shame :-(
- 9March 14th, 2010 5:16 am
Wow, thanks for including my site and logo. Special thanks to Cre8tive pixels http://www.cre8tive-pixels.com, the designer of my logo and thus inspiration for my favicon.
- 10March 14th, 2010 5:17 am
Hey, thanks for including our favicon :)
- 11
- 12March 14th, 2010 5:27 am
I have a small note about “Elastic Tabstops” favicon…
http://en.wikipedia.org/wiki/Hacker_Emblem- 13March 14th, 2010 3:30 pm
By golly, you’re right!
They look the same…
- 13
- 14March 14th, 2010 5:40 am
I like all of them! What a great article. It seems like this showcase is focused on lighter colors, simple lines and above all, no containers.
Here is an example of a reverse treatment – you can say it’s inside of some sort of encapsulation.
http://www.rezin.comDid you come across examples using reverse treatment during your research?
As always, great work, big fan of yours!
Marty - 15March 14th, 2010 6:00 am
Wow, with these kind of posts the SmashingMagazine loses more and more of the old qualities.
- 16March 14th, 2010 7:07 am
@ivomynttinen (#12)
I completely disagree. Favicons are an often overlooked area in design and it’s important as well as fascinating.
- 17March 14th, 2010 7:10 am
I’m with Xanti – Favicons are very important. They can often be used to differentiate between an amateur and a professional.
- 18March 14th, 2010 3:21 pm
I agree too, but it wouldn’t hurt to go a bit more indepth as to how these companies got to these icons, or if they are reflecting their branding, etc.
I mean, everybody can make a post: look at this image, oh and that one. Thanks for reading! .. just saying.
That said, thanks for the series, it’s a good reminder that favicons are still important.
- 19March 15th, 2010 2:33 am
Of course, favicons are an important part of a professional website. What I dislike is the style of these posts by Smashingmagazine. This post is just a list of some images, what’s about the designers, the techniques used, maybe some basic informations about favicons (possible size, transparency, animatable?)?
- 19
- 18
- 17
- 20April 5th, 2010 10:38 am
After I read your second post above; now I agree with you.
- 16
- 21March 14th, 2010 6:06 am
Nice… I like Screwturn Wiki, Nimbupani & Mixxt… I even like Smashing Magazine’s favicon, bold and clear.
And few more:
http://www.broadbandmix.co.uk
http://www.webdesignerdepot.com
http://www.tariam.co.uk
http://bestwebgallery.com- 22March 15th, 2010 2:52 am
Hey the “hand” favicon in the http://broadbandmix.co.uk website is sweet. I think apple is the best…
- 22
- 23March 14th, 2010 6:43 am
I like mine, but it doesn’t match the new layout which should be launching shortly: http://www.jhuskisson.com/
- 24March 14th, 2010 7:24 am
I like the favicon on the francophilia gazette : http://www.francophilia.com/gazette/
- 25March 14th, 2010 7:29 am
Favicons Rock! Great collection SM.
- 26March 14th, 2010 7:34 am
I enabled Javascript just to downvote this post. Thanks, though.
- 27
- 28
- 29March 14th, 2010 10:16 am
I’ve always felt like favicons are an under appreciated part of online branding and identity. Thanks for keeping this post series going.
- 30
- 31
- 32March 14th, 2010 12:29 pm
I was quite pleased with my favicon until I saw these – now I’m going to attempt the bird character from my site. On a different note, thanks Smashing Magazine for the new newsletters – they’re really good!
- 33March 14th, 2010 1:17 pm
The one used by Bing translator is illuminating.
http://www.microsofttranslator.com- 34March 14th, 2010 2:16 pm
Microsoft’s is a bit messy isn’t it?
- 34
- 35March 14th, 2010 1:59 pm
After seeing one of these articles ages ago I made sure I had an interesting looking one for myself. bittenbydesign.com
and now I am thinking I should look at it again and try and get it using some negative space as well… It is always nice to see inspiring articles like this. Shame it makes more work for myself! ;-)But since I am looking at a full rebrand of my site, it will have to wait until I am happy with the main design.
- 36March 14th, 2010 2:31 pm
Good collection.
It annoys me that so few webdesigners and even webdesign firms don’t use favicons. Even large commercial websites often forget to use favicons.
The main reason that websites without favicons annoys me is because I’m a huge fan of the Bookmark Toolbar in Mozilla Firefox, and I tend to remove the name from my favourite bookmarks.
- 37March 14th, 2010 3:28 pm
Loved the faces favicon. :D
- 38March 14th, 2010 10:16 pm
Thank you guys for including ScrewTurn Wiki!
- 39March 15th, 2010 12:27 am
Love these! Thanks for posting.
- 40March 15th, 2010 12:38 am
Ebenfalls toll:
http://blog.unitedprototype.com/favicon.ico
http://www.the-netshow.org/favicon.icoDenn beide Favicons sind präzise Darstellungen der jeweiligen Logos!
- 41March 15th, 2010 1:43 am
Fantastic… I always find favicons so hard to get right. A couple of my favourites are:
- 42March 15th, 2010 1:56 am
Screwturn’s favicon is in my view the most effective. It’s like a mini painting.
- 43March 15th, 2010 2:35 am
Need better glasses or a magnifier…however a nice collection.
- 44March 15th, 2010 2:47 am
hmmm nice very good, check this one also
http://www.3333.ae
http://www.worldoutdoor.com- 45March 15th, 2010 7:45 am
Hey Khaqan, the wordoutdoor website doesn’t really show a favicon, and 3333.ae isn’t transparant?
- 45
- 46March 15th, 2010 7:11 am
Thanks for including our favicon in your latest episode! We love Smashing Magazine and we’re stoked to be included among such a solid list of icons.
- 47March 15th, 2010 7:42 am
I never thought of my favicon (commadot.com) as nice. Thank you. You made my day. :)
- 48March 15th, 2010 7:49 am
Nice collection! A favicon is the real icing on the cake. Making favicons is fun and challenging to capture a logo or a company in just 16px x 16px.
- 49March 15th, 2010 8:05 am
I love favicons. I can’t stand when people are too lazy to create them. Then you bookmark their site and it’s just blank. D:< The one on my site is a nice little monitor. :D
- 50March 15th, 2010 2:46 pm
Totally agree!
- 50
- 51March 15th, 2010 8:11 am
Great collection! Never knew these little gems had a name. I rely on these “visual indicators” and would appreciate if all sites remembered to include one in their url.
- 52March 15th, 2010 8:33 am
Nice one. A lot of great favicons ;-)
- 53March 15th, 2010 10:16 am
Nice list, thanks!
The lemon favicon here is quite cool too:
- 54March 15th, 2010 2:45 pm
I am laughing my ass off here. Thank you for including favicon (CMS Expo). That little Tic Tac-sized patch actually spiked our traffic to our site this weekend. WOW!
- 55March 15th, 2010 5:50 pm
很漂亮！
so nice ~ - 56March 15th, 2010 7:22 pm
nice collection waiting for more !
- 57
- 58March 16th, 2010 8:51 am
Thanks for this great list, I think I need to repair favicon on my blog :p
- 59March 16th, 2010 9:55 am
Here’s mine for my Un Chien Bleu blog: http://www.robopug.com/nest/ ( a little blue dog–get it?)
- 60March 16th, 2010 1:26 pm
I have a cool favicon I made and you can check it out at http://www.jdudesign.com Let me know what you think. Is there any way I can improve it.
- 61March 17th, 2010 12:03 pm
I’ve created a favicon using my drawing, see it on my site: http://jolantadebowska.ovh.org/index.html
- 62March 17th, 2010 1:00 pm
At the moment, its just a bit boring. You might want to do something exciting with it, Jason.
- 63March 17th, 2010 6:44 pm
i’m impressed with the cube blue-orange with non-perspective lines (against the pixel art common sense), yet very sharp and soft.
- 64March 18th, 2010 12:03 am
I love favicons and think they are one of the most important things in a website.
- 65March 28th, 2010 1:34 pm
How do icons get designed anyway? Everytime I design a vector, then scale it down, the pixels don’t match up with screen and I get soft and hard edges etc. …resulting in usually blurry icons.
- 66April 11th, 2010 11:13 am
Oh ! Great showcase !
- 67May 31st, 2010 9:56 am
Nice collection! n__n
- 68September 1st, 2010 6:21 am
hier sind auch noch welche:
http://www.ciwilounge.de
http://www.webdesign-unterfranken.de
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- @sazzy yaaay, happy birthday, Sarah! And congratulations to the wedding! You are a great couple!
- Good News: Dual-Core CPU Opens Door To 1080p On Smartphones - http://bit.ly/a0KowT
- Man Who Destroyed the Boring Interface and Lived - http://bit.ly/c2SjIh - Very interesting read. #graphic #design
- @simoncollison Happy Birthday, Simon. Have a good one, a don't work too much ;-)
- Fresh on SmashingMag: Designing and Producing Creative Business Cards: Techniques and Details - http://bit.ly/ceOKDd
- Google Instant Search Is Released - http://bit.ly/drRq8U
- Web Project: Weighing Cost vs Speed vs Quality - http://bit.ly/ap9IIl
- CSS3Menu: create CSS3-based menus with this free library - http://bit.ly/bJfj1l
- Web Wireframe Kit (a free PSD file) - http://bit.ly/d14tll
- A step to be ahead: start designing for mobile devices - http://bit.ly/dv6DQN
Nice Collection !