50 Fantastic Favicons: Episode 9

Advertisement

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.

Fantastic Favicons

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:

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.

tableau9 Tableau Public
gnash10 Gnash Project
toproundups11 Top Roundups
elastic12 Elastic Tabstops
landing13 i-on interactive
arc14 Arc Technology Group
kodingen15 Kodingen
slv-rent Sound Light Vision
highcharts16 Highcharts
faces17 Faces
photoscape Photoscape
london18 London Reviews
openfaces19 Open Faces
RocketTheme20 RocketTheme
techbridge21 Techbridge
softexpansion22 Soft eXpansion
screwturn23 Screwturn Wiki
nimbupani24 Nimbupani
spoonjuice25 Spoonjuice
unifreiburg26 Universität Freiburg
paragon27 Paragon Software
imasters iMasters
techeblog28 TechEBlog
fitbit29 FitBit
dropbox30 DropBox
axialis31 Axialis
swebapps32 Swebapps
acquia33 Acquia
snipt34 Snipt
mix35 MIX Online
second36 Second Market
openx37 Open X
filemail38 Filemail
55eleven39 55Eleven
onehub40 Onehub
projectbubble41 Projectbubble
projektwerk42 Projektwerk
medienlab43 Medienlab
iconshock44 Iconshock
splitweed45 Splitweed
goby46 Goby
m147 M1 Design
pagestat48 PageStat
commadot49 Commadot
babbelblog50 Babbelblog
tammyhart51 Tammy Hart
toufee52 Toufee
lion53 Lion Framework
highbeam54 High Beam
mixxt55 Mixxt
cmsexpo56 CMSExpo

And finally, all the favicons in one picture:

All Favicons in one Picture

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/11/20/favicons-episode-8/
  2. 2 ../2008/06/24/favicon-episode-7/
  3. 3 ../2008/03/21/favicon-episode-6-black-abstract-and-hand-drawing/
  4. 4 ../2008/01/01/favicons-episode-5-the-delicate-beauties/
  5. 5 ../2007/09/11/creative-favicons-tiny-artwork/
  6. 6 ../2007/06/14/creative-favicons-when-small-is-beautiful/
  7. 7 ../2007/03/29/inspire-yourself-more-creative-favicons/
  8. 8 ../2007/01/31/inspire-yourself-50-remarkable-favicons/
  9. 9 http://www.tableausoftware.com/public/
  10. 10 http://www.gnashdev.org/
  11. 11 http://toproundups.com/
  12. 12 http://nickgravgaard.com/elastictabstops/
  13. 13 http://www.ioninteractive.com/
  14. 14 http://arctg.com/
  15. 15 http://kodingen.com/
  16. 16 http://www.highcharts.com/
  17. 17 http://www.faces.com/
  18. 18 http://www.tipped.co.uk/
  19. 19 http://www.openfaces.org/
  20. 20 http://www.rockettheme.com/
  21. 21 http://www.techbridge.ca/
  22. 22 http://www.techbridge.ca/
  23. 23 http://www.screwturn.eu/
  24. 24 http://nimbupani.com/
  25. 25 http://www.spoonjuice.com/
  26. 26 http://www.uni-freiburg.de/
  27. 27 http://www.uni-freiburg.de/
  28. 28 http://www.imasters.com.br
  29. 29 http://www.fitbit.com/
  30. 30 http://www.dropbox.com/
  31. 31 http://axialis.com/
  32. 32 http://www.swebapps.com/
  33. 33 http://acquia.com/
  34. 34 http://snipt.org
  35. 35 http://visitmix.com/
  36. 36 http://www.secondmarket.com/
  37. 37 http://www.openx.org
  38. 38 http://www.filemail.com
  39. 39 http://55eleven.com/
  40. 40 http://onehub.com/
  41. 41 http://projectbubble.com/
  42. 42 http://www.projektwerk.de/
  43. 43 http://www.medienlab.de/
  44. 44 http://www.iconshock.com/
  45. 45 http://www.splitweet.com/
  46. 46 http://www.goby.com/
  47. 47 http://www.m1-design.de/
  48. 48 http://pagestat.com/
  49. 49 http://commadot.com/
  50. 50 http://blog.babbel.com/
  51. 51 http://tammyhartdesigns.com/
  52. 52 http://www.toufee.com/
  53. 53 http://www.lionframework.org/
  54. 54 http://www.highbeam.com/
  55. 55 http://www.mixxt.de/
  56. 56 http://www.cmsexpo.net/

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Nice Collection !

  2. 3

    Sweet collection. Favicons are something that alway seem to get left until the last minute or entirely forgotten. Thanks for collating these.

  3. 4

    Great Favicons!

    I’m loving this one at the moment http://alanvanroemburg.com

    Also the http://grainedit.com/ icon is very nice and clean.

  4. 5

    Leandro (inkel)

    March 14, 2010 4:00 am

    Nice collection, although would have been nice if you added links to them :)

  5. 6

    Nice one :)
    Hehe I love this one in http://www.rendu.lt nice big black heart with some orange stroke.

  6. 7

    Thanks for putting Project Bubble in there! I’m honoured :)

  7. 8

    JohnM @ Patchwork Pixels

    March 14, 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 :-(

  8. 9

    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.

  9. 10

    Hey, thanks for including our favicon :)

  10. 11
  11. 12

    I have a small note about “Elastic Tabstops” favicon…
    http://en.wikipedia.org/wiki/Hacker_Emblem

  12. 14

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

    Did you come across examples using reverse treatment during your research?

    As always, great work, big fan of yours!
    Marty

  13. 15

    Wow, with these kind of posts the SmashingMagazine loses more and more of the old qualities.

    • 16

      @ivomynttinen (#12)

      I completely disagree. Favicons are an often overlooked area in design and it’s important as well as fascinating.

      • 17

        Ross - @TheCoolestCool

        March 14, 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.

        • 18

          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.

          • 19

            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?)?

    • 20

      After I read your second post above; now I agree with you.

  14. 21

    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

  15. 23

    Jamie Huskisson

    March 14, 2010 6:43 am

    I like mine, but it doesn’t match the new layout which should be launching shortly: http://www.jhuskisson.com/

  16. 24

    I like the favicon on the francophilia gazette : http://www.francophilia.com/gazette/

  17. 25

    Favicons Rock! Great collection SM.

  18. 26

    I enabled Javascript just to downvote this post. Thanks, though.

  19. 27

    My favicon for this app (http://luba.roeltz.com/) should be there =)

  20. 28

    What about animated favicons?
    Check out http://vielhuber.de

  21. 29

    I’ve always felt like favicons are an under appreciated part of online branding and identity. Thanks for keeping this post series going.

  22. 30

    Nice collection.. and what about: http://gunis.sk favicon ?? :)

  23. 31
  24. 32

    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!

  25. 33

    The one used by Bing translator is illuminating.
    http://www.microsofttranslator.com

  26. 35

    Nick - Freelance Designer

    March 14, 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.

  27. 36

    Helge-Kristoffer Wang

    March 14, 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.

  28. 37

    Loved the faces favicon. :D

  29. 38

    Thank you guys for including ScrewTurn Wiki!

  30. 39

    Love these! Thanks for posting.

  31. 40

    Ebenfalls toll:
    http://blog.unitedprototype.com/favicon.ico
    http://www.the-netshow.org/favicon.ico

    Denn beide Favicons sind präzise Darstellungen der jeweiligen Logos!

  32. 41

    Fantastic… I always find favicons so hard to get right. A couple of my favourites are:

    http://bestservedcold.com/
    http://www.domestika.org/

  33. 42

    Screwturn’s favicon is in my view the most effective. It’s like a mini painting.

  34. 43

    Need better glasses or a magnifier…however a nice collection.

  35. 44

    hmmm nice very good, check this one also
    http://www.3333.ae
    http://www.worldoutdoor.com

    • 45

      Hey Khaqan, the wordoutdoor website doesn’t really show a favicon, and 3333.ae isn’t transparant?

  36. 46

    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.

  37. 47

    I never thought of my favicon (commadot.com) as nice. Thank you. You made my day. :)

  38. 48

    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.

  39. 49

    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

  40. 51

    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.

  41. 52

    Nice one. A lot of great favicons ;-)

  42. 53

    Nice list, thanks!

    The lemon favicon here is quite cool too:

    http://www.freshfavicon.com/

  43. 54

    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!

  44. 55

    很漂亮!
    so nice ~

  45. 56

    Bharath Mandava

    March 15, 2010 7:22 pm

    nice collection waiting for more !

  46. 57

    Nice thing : (^_^) : Annotha fav here : http://www.lecteur-blu-ray-3d.com

  47. 58

    Thanks for this great list, I think I need to repair favicon on my blog :p

  48. 59

    Here’s mine for my Un Chien Bleu blog: http://www.robopug.com/nest/ ( a little blue dog–get it?)

  49. 60

    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.

  50. 61

    I’ve created a favicon using my drawing, see it on my site: http://jolantadebowska.ovh.org/index.html

  51. 62

    At the moment, its just a bit boring. You might want to do something exciting with it, Jason.

  52. 63

    i’m impressed with the cube blue-orange with non-perspective lines (against the pixel art common sense), yet very sharp and soft.

  53. 64

    I love favicons and think they are one of the most important things in a website.

  54. 65

    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.

  55. 66

    Oh ! Great showcase !

  56. 67

    Nice collection! n__n

  57. 68
  58. 69

    Nice Favicon, I Inspired by your collection and create a Favicon for my site.

    Really very nice favicons.

  59. 70

    Nice Favicon, I Inspired by your collection and create a Favicon for my site.

    Really very nice favicons.

  60. 71

    Thanks Sven, It´s a great and original collection.

  61. 72

    Just found out unbreakableit(dot)com somehow came to same logo as Techbridge had in 2008 ;)

  62. 73

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

↑ Back to top