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)
Anas Nakawa
March 14th, 2010 3:37 amNice Collection !
kumar
March 14th, 2010 9:48 pmThis is also sweet collection.
@jinjaninja
March 14th, 2010 3:42 amSweet collection. Favicons are something that alway seem to get left until the last minute or entirely forgotten. Thanks for collating these.
Jeff
March 14th, 2010 3:52 amGreat Favicons!
I’m loving this one at the moment http://alanvanroemburg.com
Also the http://grainedit.com/ icon is very nice and clean.
Leandro (inkel)
March 14th, 2010 4:00 amNice collection, although would have been nice if you added links to them :)
Ivar
March 14th, 2010 4:17 amNice one :)
Hehe I love this one in http://www.rendu.lt nice big black heart with some orange stroke.
Stu Green
March 14th, 2010 4:54 amThanks for putting Project Bubble in there! I’m honoured :)
JohnM @ Patchwork Pixels
March 14th, 2010 5:07 amFantastic icons, it’s amazing how much some artists can fit into 16×16 pixels. They really put my effort to shame :-(
Tammy Hart
March 14th, 2010 5:16 amWow, 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.
iconshock
March 14th, 2010 5:17 amHey, thanks for including our favicon :)
Daniel
March 14th, 2010 5:22 amCheck this favicon
http://www.vagalume.com.br/
SJL
March 14th, 2010 5:27 amI have a small note about “Elastic Tabstops” favicon…
http://en.wikipedia.org/wiki/Hacker_Emblem
mary
March 14th, 2010 3:30 pmBy golly, you’re right!
They look the same…
MiracleMart
March 14th, 2010 5:40 amI 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.com
Did you come across examples using reverse treatment during your research?
As always, great work, big fan of yours!
Marty
ivomynttinen
March 14th, 2010 6:00 amWow, with these kind of posts the SmashingMagazine loses more and more of the old qualities.
Xanti SS
March 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.
Ross - @TheCoolestCool
March 14th, 2010 7:10 amI’m with Xanti – Favicons are very important. They can often be used to differentiate between an amateur and a professional.
Floris
March 14th, 2010 3:21 pmI 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.
ivomynttinen
March 15th, 2010 2:33 amOf 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?)?
zeynep
April 5th, 2010 10:38 amAfter I read your second post above; now I agree with you.
Sunny
March 14th, 2010 6:06 amNice… 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
Chin Hu
March 15th, 2010 2:52 amHey the “hand” favicon in the http://broadbandmix.co.uk website is sweet. I think apple is the best…
Jamie Huskisson
March 14th, 2010 6:43 amI like mine, but it doesn’t match the new layout which should be launching shortly: http://www.jhuskisson.com/
sknob
March 14th, 2010 7:24 amI like the favicon on the francophilia gazette : http://www.francophilia.com/gazette/
Zach
March 14th, 2010 7:29 amFavicons Rock! Great collection SM.
snlr
March 14th, 2010 7:34 amI enabled Javascript just to downvote this post. Thanks, though.
Röeltz
March 14th, 2010 7:56 amMy favicon for this app (http://luba.roeltz.com/) should be there =)
David
March 14th, 2010 8:00 amWhat about animated favicons?
Check out http://vielhuber.de
Jesse McFarlane
March 14th, 2010 10:16 amI’ve always felt like favicons are an under appreciated part of online branding and identity. Thanks for keeping this post series going.
Diesel
March 14th, 2010 10:20 amNice collection.. and what about: http://gunis.sk favicon ?? :)
cloddo
March 14th, 2010 12:06 pmMay I suggest a couple too? :)
http://drivecast.eu/
http://www.nin.com/
Sparky Teaching
March 14th, 2010 12:29 pmI 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!
Hiro
March 14th, 2010 1:17 pmThe one used by Bing translator is illuminating.
http://www.microsofttranslator.com
James
March 14th, 2010 2:16 pmMicrosoft’s is a bit messy isn’t it?
Nick - Freelance Designer
March 14th, 2010 1:59 pmAfter 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.
Helge-Kristoffer Wang
March 14th, 2010 2:31 pmGood 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.
mary
March 14th, 2010 3:28 pmLoved the faces favicon. :D
Dario Solera
March 14th, 2010 10:16 pmThank you guys for including ScrewTurn Wiki!
WPSecurityLock
March 15th, 2010 12:27 amLove these! Thanks for posting.
Larß Riske
March 15th, 2010 12:38 amEbenfalls toll:
http://blog.unitedprototype.com/favicon.ico
http://www.the-netshow.org/favicon.ico
Denn beide Favicons sind präzise Darstellungen der jeweiligen Logos!
Keith
March 15th, 2010 1:43 amFantastic… I always find favicons so hard to get right. A couple of my favourites are:
http://bestservedcold.com/
http://www.domestika.org/
And
March 15th, 2010 1:56 amScrewturn’s favicon is in my view the most effective. It’s like a mini painting.
liebesich
March 15th, 2010 2:35 amNeed better glasses or a magnifier…however a nice collection.
Khaqan
March 15th, 2010 2:47 amhmmm nice very good, check this one also
http://www.3333.ae
http://www.worldoutdoor.com
Leon
March 15th, 2010 7:45 amHey Khaqan, the wordoutdoor website doesn’t really show a favicon, and 3333.ae isn’t transparant?
Jim
March 15th, 2010 7:11 amThanks 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.
Glen Lipka
March 15th, 2010 7:42 amI never thought of my favicon (commadot.com) as nice. Thank you. You made my day. :)
Leon
March 15th, 2010 7:49 amNice 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.
David Bradley
March 15th, 2010 8:05 amI 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
John Coonen
March 15th, 2010 2:46 pmTotally agree!
Joan Stroika
March 15th, 2010 8:11 amGreat 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.
TordDesign
March 15th, 2010 8:33 amNice one. A lot of great favicons ;-)
Stefan Ivanov
March 15th, 2010 10:16 amNice list, thanks!
The lemon favicon here is quite cool too:
http://www.freshfavicon.com/
John Coonen
March 15th, 2010 2:45 pmI 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!
莫矮水北
March 15th, 2010 5:50 pm很漂亮！
so nice ~
Bharath Mandava
March 15th, 2010 7:22 pmnice collection waiting for more !
LBR3D
March 16th, 2010 12:19 amNice thing : (^_^) : Annotha fav here : http://www.lecteur-blu-ray-3d.com
AnggaRifandi
March 16th, 2010 8:51 amThanks for this great list, I think I need to repair favicon on my blog :p
Maiasaura
March 16th, 2010 9:55 amHere’s mine for my Un Chien Bleu blog: http://www.robopug.com/nest/ ( a little blue dog–get it?)
Jason
March 16th, 2010 1:26 pmI 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.
jola
March 17th, 2010 12:03 pmI’ve created a favicon using my drawing, see it on my site: http://jolantadebowska.ovh.org/index.html
Falk
March 17th, 2010 1:00 pmAt the moment, its just a bit boring. You might want to do something exciting with it, Jason.
Moka
March 17th, 2010 6:44 pmi’m impressed with the cube blue-orange with non-perspective lines (against the pixel art common sense), yet very sharp and soft.
Andris
March 18th, 2010 12:03 amI love favicons and think they are one of the most important things in a website.
Allan
March 28th, 2010 1:34 pmHow 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.
Danilo Ramos
April 11th, 2010 11:13 amOh ! Great showcase !
Jelena
May 31st, 2010 9:56 amNice collection! n__n
webmatr1x
September 1st, 2010 6:21 amhier sind auch noch welche:
http://www.ciwilounge.de
http://www.webdesign-unterfranken.de
Dewlance
October 24th, 2010 12:45 amNice Favicon, I Inspired by your collection and create a Favicon for my site.
Really very nice favicons.
Fox Hats
March 28th, 2011 7:52 pmNice Favicon, I Inspired by your collection and create a Favicon for my site.
Really very nice favicons.
LuisLópez
June 6th, 2011 2:57 amThanks Sven, It´s a great and original collection.
Sasha Baksht
September 4th, 2011 8:49 amJust found out unbreakableit(dot)com somehow came to same logo as Techbridge had in 2008 ;)
Christopher
September 19th, 2011 10:30 pmAnything you mentioned made plenty of sense. But, think about this, what happens if you included a little content? I am talking about, I dont want to explain how to run your web site, but imagine if you included anything to maybe get peoples attention? As being a video clip or a picture or two to get people interested in what you have to talk about. I believe, it would help make your blog become more active a bit more.