Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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.

Fantastic Favicons

That aside, favicons1 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. [Content Care Nov/11/2016]

You may also want to take a look at the following related 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 logo4. Pay attention to the details of the design.

Here’s the List of Favicons Link

tableau Tableau Public
gnash Gnash Project
toproundups Top Roundups
elastic Elastic Tabstops
landing i-on interactive
arc Arc Technology Group
kodingen Kodingen
slv-rent Sound Light Vision
highcharts Highcharts
faces Faces
photoscape Photoscape
london London Reviews
openfaces Open Faces
RocketTheme RocketTheme
techbridge Techbridge
softexpansion Soft eXpansion
screwturn Screwturn Wiki
nimbupani Nimbupani
spoonjuice Spoonjuice
unifreiburg Universität Freiburg
paragon Paragon Software
imasters iMasters
techeblog TechEBlog
fitbit FitBit
dropbox DropBox
axialis Axialis
swebapps Swebapps
acquia Acquia
snipt Snipt
mix MIX Online
second Second Market
openx Open X
filemail Filemail
55eleven 55Eleven
onehub Onehub
projectbubble Projectbubble
projektwerk Projektwerk
medienlab Medienlab
iconshock Iconshock
splitweed Splitweed
goby Goby
m1 M1 Design
pagestat PageStat
commadot Commadot
babbelblog Babbelblog
tammyhart Tammy Hart
toufee Toufee
lion Lion Framework
highbeam High Beam
mixxt Mixxt
cmsexpo CMSExpo

And finally, all the favicons in one picture:

All Favicons in one Picture

(al)

Footnotes Link

  1. 1 https://en.wikipedia.org/wiki/Favicon
  2. 2 https://www.smashingmagazine.com/2009/08/vital-tips-for-effective-logo-design/
  3. 3 https://www.smashingmagazine.com/2008/07/55-free-high-quality-icon-sets/
  4. 4 https://www.smashingmagazine.com/2015/06/effective-logo-design-symbols-metaphors-intuition/

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing Science-Fiction and at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing — all in German.

  1. 1

    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 :-(

    0
  2. 2

    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/

    -2
  3. 3

    Nice Collection !

    0
  4. 4

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

    0
  5. 5

    Leandro (inkel)

    March 14, 2010 4:00 am

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

    0
  6. 6

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

    0
  7. 7

    Hey, thanks for including our favicon :)

    0
  8. 8

    ivomynttinen

    March 14, 2010 6:00 am

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

    0
    • 9

      @ivomynttinen (#12)

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

      0
      • 10

        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.

        0
        • 11

          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.

          0
          • 12

            ivomynttinen

            March 15, 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?)?

            0
    • 13

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

      0
  9. 14

    Favicons Rock! Great collection SM.

    0
  10. 15

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

    0
  11. 16

    Jesse McFarlane

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

    0
  12. 17

    Sparky Teaching

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

    0
  13. 18

    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.

    -1
  14. 19

    Microsoft’s is a bit messy isn’t it?

    0
  15. 20

    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.

    0
  16. 21

    Loved the faces favicon. :D

    0
  17. 22

    By golly, you’re right!

    They look the same…

    0
  18. 23

    Thank you guys for including ScrewTurn Wiki!

    0
  19. 24

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

    0
  20. 25

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

    0
  21. 26

    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.

    0
  22. 27

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

    0
  23. 28

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

    0
  24. 29

    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.

    0
  25. 30

    David Bradley

    March 15, 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

    0
  26. 32

    Joan Stroika

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

    0
  27. 33

    Nice one. A lot of great favicons ;-)

    0
  28. 34

    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!

    0
  29. 35

    莫矮水北

    March 15, 2010 5:50 pm

    很漂亮!
    so nice ~

    0
  30. 36

    Bharath Mandava

    March 15, 2010 7:22 pm

    nice collection waiting for more !

    0
  31. 37

    AnggaRifandi

    March 16, 2010 8:51 am

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

    0
  32. 38

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

    0
  33. 39

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

    0
  34. 40

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

    0
  35. 41

    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.

    0
  36. 42

    Oh ! Great showcase !

    0
  37. 43

    Nice collection! n__n

    0
  38. 44

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

    Really very nice favicons.

    0
  39. 45

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

    Really very nice favicons.

    0
  40. 46

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

    0
  41. 47

    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.

    0

↑ Back to top