Favicon Episode 7

Advertisement

Every now and again we showcase beautiful favicons — tiny pieces of art you’ll usually find in your browser’s address bar or when searching through your bookmarks. Favicons are important as they provide visual indicators to visitors and help them to easily associate the content with a bookmark in their browser. Besides, favicons are just nice to look at and there are way too many sites which don’t make use of them. We like to change things. Which is why here is the 7th episode of the favicons series.

We’ve written enough about favicons in our recent posts. If you’d like to find out more about them, feel free to take a look at our previous posts:

Favicon Episode 7

The favicon of the month was designed by Google7. To improve the scalability on new platforms like the iPhone and other mobile devices Google has replaced the old favicon with a new one first after 8.5 years. Not only that – Google has released a whole favicon family which you can observe in a number of Google applications. The primary Google’s favicon is displayed below:

Favicon8

However, some designers claim that Google’s new favicon is ugly9 and Denis Kortunov knows how to draw a good icon for Google10. Here is an example of how it might look like:

Favicon11

…or like this:

Favicon12

…and this is how the favicon could look like:

Favicon13

Below you’ll find 69 further outstanding favicons. Let’s start with the dark ones. Please notice that the favicons weren’t chosen simply because of their beauty; it’s been important to us that the favicon perfectly fits to the overall site design. All favicons are linked to the sites where they are used — you can click on them to get more insights into how favicon design can be related to the layout design.

Black and Grey

Favicon14 NK Interactive
Favicon15 Dennis Kleine
Favicon16 Design by Ninjas
Favicon1718 Vivabit
Favicon19 Our Type
Favicon20 The Serif
Favicon21 Fakeblog
Favicon22 Shaun Inman
Favicon23 Singularity Conference
Favicon24 urbanchip
Favicon25 Cool Hunting
Favicon26 Mutum Sigillum
Favicon27 Hongkiat
Favicon28 Boxes and Arrows
Favicon29 DM2interactive
Favicon30 funkyremixes

Blue and Green

Favicon31 Rhaya
Favicon32 Fused Network
Favicon33 urbanphes
Favicon34 eliectricurrent
Favicon35 arhibet
Favicon36 Eden
Favicon37 Quadrifolia
Favicon38 Twhirl
Favicon39 laterloop
Favicon40 Jeux de Maux
Favicon41 emtwo
Favicon42 visible.net
Favicon43 SAS
Favicon44 Infinity Art
Favicon4546 Teddy Hwang
Favicon47 Get a Freelancer

Drawn

Favicon48 wagner graphics
Favicon49 Sail Select
50Favicon518552 Arty Crooks
Favicon53 SmugMug

Orange & Red

Favicon54 anaconsol
Favicon55 Headscape
Favicon56 nickstedt web
Favicon57 HEBAtec
Favicon58 Panoye
Favicon59 Designer’s Toolbox
Favicon60 Keinu
Favicon61 suggest.name
Favicon62 Ebugogo
Favicon63 Fruit
Favicon64 iPhone Lemurs
Favicon65 Capture All
Favicon66 Pro Webdesign
Favicon67 Sprout
Favicon68 Overheard in New York
Favicon69 Toomix
Favicon70 Mixx
Favicon71 Faveup
Favicon72 Computerlove
Favicon73 ChaCha
Favicon74 Pop Art Blog
Favicon75 colorcubic
Favicon76 Barrierekompass

Other

Favicon77 Infosthetics
Favicon78 rgb6
Favicon79 yellowgreen
Favicon80 turistik.cz
Favicon81 Digialmesh
Favicon Protein OS
Favicon82 Kean Richmond
Favicon83 Xen

Extremely colorful favicons

Favicon848552 Salle Polyvalente
Favicon86 ALXA

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/
  2. 2 http://www.smashingmagazine.com/2007/03/29/inspire-yourself-more-creative-favicons/
  3. 3 http://www.smashingmagazine.com/2007/06/14/creative-favicons-when-small-is-beautiful/
  4. 4 http://www.smashingmagazine.com/2007/09/11/creative-favicons-tiny-artwork/
  5. 5 http://www.smashingmagazine.com/2008/01/01/favicons-episode-5-the-delicate-beauties/
  6. 6 http://www.smashingmagazine.com/2008/03/21/favicon-episode-6-black-abstract-and-hand-drawing/
  7. 7 http://googleblog.blogspot.com/2008/06/one-fish-two-fish-red-fish-blue-fish.html
  8. 8 http://www.google.com/
  9. 9 http://wisdump.com/design/why-is-the-google-new-favicon-so-ugly/
  10. 10 http://turbomilk.com/truestories/cookbook/masterclass/google-favicon/
  11. 11 http://turbomilk.com/truestories/cookbook/masterclass/google-favicon/
  12. 12 http://turbomilk.com/truestories/cookbook/masterclass/google-favicon/
  13. 13 http://turbomilk.com/truestories/cookbook/masterclass/google-favicon/
  14. 14 http://www.nkinteractivo.com.ar
  15. 15 http://dennis-kleine.com/
  16. 16 http://designbyninjas.com/
  17. 17 http://www.vivabit.com/
  18. 18 http://www.teddyhwang.com/
  19. 19 http://www.ourtype.be/
  20. 20 http://www.theserif.net/
  21. 21 http://www.fakeblog.de/
  22. 22 http://www.shauninman.com/
  23. 23 http://singularity08.com/
  24. 24 http://www.urbanchip.com.ar/
  25. 25 http://www.coolhunting.com/
  26. 26 http://www.mutumsigillum.com/
  27. 27 http://www.hongkiat.com
  28. 28 http://boxesandarrows.com/
  29. 29 http://www.dm2interactive.com/
  30. 30 http://funkyremixes.com/
  31. 31 http://rhaya.com/
  32. 32 http://www.fusednetwork.com/
  33. 33 http://www.urbanphes.es/
  34. 34 http://www.electricurrent.com/
  35. 35 http://www.arhibet.com/
  36. 36 http://www.eden.cc/
  37. 37 http://quadrifolia.de/
  38. 38 http://www.twhirl.org/
  39. 39 http://www.laterloop.com/
  40. 40 http://www.jeuxdemaux.com/
  41. 41 http://www.emtwowebstudios.com/
  42. 42 http://www.visible.net/
  43. 43 http://www.sas.com/
  44. 44 http://www.infinityart.ro/
  45. 45 http://www.teddyhwang.com/
  46. 46 http://dennis-kleine.com/
  47. 47 http://www.getafreelancer.com/
  48. 48 http://www.wagnergraphics.de/
  49. 49 http://sailselect.com.hr/
  50. 50 http://www.turistik.cz/
  51. 51 http://www.artycrooks.com
  52. 52 http://www.rbg6.se/
  53. 53 http://www.smugmug.com/
  54. 54 http://www.anaconsol.com/
  55. 55 http://headscape.co.uk/
  56. 56 http://www.nickstedt.de/
  57. 57 http://www.hebatec.de/
  58. 58 http://www.panoye.com/
  59. 59 http://www.designerstoolbox.com/designresources/websites/
  60. 60 http://keinu.net/
  61. 61 http://suggest.name/
  62. 62 http://www.ebugogo.tv/
  63. 63 http://kingston.fruitproperty.com/
  64. 64 http://iphonelemurs.com/
  65. 65 http://www.capture-all.co.uk/
  66. 66 http://www.prowebdesign.hu/
  67. 67 http://sproutbuilder.com/
  68. 68 http://www.overheardinnewyork.com/
  69. 69 http://www.toormix.com/
  70. 70 http://www.mixx.com/
  71. 71 http://www.faveup.com/
  72. 72 http://cpluv.com/
  73. 73 https://www.chacha.com/
  74. 74 http://blogs.popart.com/
  75. 75 http://www.colorcubic.com/
  76. 76 http://www.barrierekompass.de/
  77. 77 http://infosthetics.com
  78. 78 http://www.rbg6.se/
  79. 79 http://yellowgreen.de/
  80. 80 http://www.turistik.cz/
  81. 81 http://www.digitalmash.com/
  82. 82 http://www.keanrichmond.com/
  83. 83 http://vpsmedia.com/
  84. 84 http://www.sallepolyvalente.com/
  85. 85 http://www.rbg6.se/
  86. 86 http://alxa.ru/

↑ 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
  1. 1

    great examples….love the google one that Denis Kortunov’s done!

    Mayank

    0
  2. 2

    extremely good

    0
  3. 3

    Cool, loving the mini Art! :)

    0
  4. 4

    Smashing Magazine is back on track with a series of good posts in a row!

    0
  5. 5

    I love rgb6’s simply due to the colors vs the letters. :)

    0
  6. 6

    Smashing Magazine Is the best magazine. It offers the best subjects

    0
  7. 7

    The ALXA icon links to the Salle Polyvalente page. You might want to change that…

    0
  8. 8

    Thats just amazing :D I really love this one. It is practical and gave me some great ideas for doing a website :D

    0
  9. 9

    Nice assortment. I’m wondering how well they hold-up in terms of their alpha-transparency on backgrounds other than white?

    0
  10. 10

    Some great examples of great design in such a small space, plus seeing my own favicon there is awesome.

    0
  11. 11

    It’s amazing how creative someone can be in 16 square pixels of space!

    0
  12. 12

    I use a photo turned to a .fav as my favicon on my site. I think Favicons have become kind of like .. a business card. They tell you what site you’re on visually before people really even read. When I have multiple tabs open in FireFox, it’s the easiest and fastest way for me to tell what is what. Since I’m illiterate.

    You can see my favicon in action at http://www.taddmencer.com if you’re interested in seeing.

    0
  13. 13

    I use a part of my logo for the favicon ’cause I think using the whole logo would make a mess at 16×16 size. Here it is: http://www.logodiver.com/

    0
  14. 14

    I like the big coloured G… Google should consider to adopt this one!

    0
  15. 15

    Google could really use a new favicon…

    0
  16. 16

    Can the favicons be animated?

    0
  17. 17

    Is there a quick way to capture the favicon? How do you do?

    0
  18. 18

    Thank you very much for mentionning my website again. =)

    0
  19. 19

    Thanks for mentioning mine too :D but hey our name isn’t Xen! I hope Citrix doesn’t see this cause they might not like it haha :D

    Thanks

    0
  20. 20

    salle polyvalente’s favicon makes me sick!

    0
  21. 21

    Smashing article!

    Love that Google favicon by Denis Kortunov! (By the way, thank you for using one of my favicons in your examples.) And keep up the good work.

    0
  22. 22

    Check mine, it’s animated and lovely :)

    http://www.monsieurlam.com/

    0
  23. 23

    Thanks for including Emtwo’s favicon!

    0
  24. 24

    Thank you for including the iphone lemurs favicon!

    0
  25. 25

    extreme colorful looks awful :D

    0
  26. 26

    “Extremely Colorful” should read “extremely annoying”. It’s like a horrible little banner ad only I didn’t “win” anything.

    The rest though are fantastic.

    0
  27. 27

    Bleh, I rather dislike Dennis’s suggestions for a “better” Google favicon.

    0
  28. 28

    The Google’s alternative icon looks like Windows Media Player icon. Don’t you see it?

    0
  29. 29

    I like the new Google favicon! I think Denis’s suggestion looks too much like something made by Windows. Definitely not what Google wants.

    0
  30. 30

    Another good collection of favicons. Although Google’s favicon may be ugly, does it really matter. A good favicon should stand out from the rest, which Google’s does and should be closely linked to the website. The Google favicon has had so much publicity, everyone knows it stands for Google!

    BTW Aren’t the animated icons cheating seeing as they are actually animated gifs as opposed to true icons.

    0
  31. 31
  32. 32

    I think the one at Ploc Media is pretty neat, simple but bold.

    0
  33. 33

    I love favicons. It’s gotten to a point where I could leave most sitename blank, and know what I’m looking for just from the favicon. I get so sad when I find a website that doesn’t have one. It makes my bookmarks and tabs look so drab.

    0
  34. 34

    Thanks for the mentioned :-)

    0
  35. 35

    Must admit the new google favicon is rather quiet ugly. Denis Kortunov attempts to capture there current market alot better i believe.

    Its and interesting post thanks smashing magazine, favicons can certainly be a tricky thing to nail perfectly !

    0
  36. 36

    I think the old Google favicon was more effective on a small scale.

    I especially like Our Type and Fakeblog.

    0
  37. 37

    Great list! Not a fan of the “Salle Polyvalente” icon though…

    0
  38. 38

    I still prefer the present G icon. Much easier on eyes and less obstrusive ;)
    nice article though …

    0
  39. 39

    To anyone who’s looking for how to do the animated ico’s (it took me like half an hour to figure out) just make an animated gif and rename to an icon fie.

    0
  40. 40

    hello smashing, these are cool favicon.

    could you also list some software that are specifically designed to design favicon. thanks.

    0
  41. 41

    Great post and series. Thanks for mentioning the Visible favicon!! Personally, I have always liked the Smashing red/white “S” favicon you have now. The Google one is sweet too.

    0
  42. 42

    Google is not about pretty. Google is about recognition. I find all of the three alternatives that your provider of art for the favicon replacement of google’s favicon to be less readable as the Google brand. Lets remember a favicon is meant to be apart of brand recognition. And it may not be tied to a piece of type it has to exist on it’s own so to speak. Ultimately it’ll live in bookmarked pages so regardless of your eye sight you can connect more immediately to the brand.

    That being said the favicon could be updated and be more readable but I’d be hard pressed to find something without a g in it and being the same typeface as the mark’s g. Oh by the way the G that your contributor made for the 4 color Capital G looks completely like a beachball when compressed to 16×16.

    I Think some of the favicon work that was provided was interesting but fell short of having a point, in design theirs no point to create if you cannot communicate. Icons take time to read and if they do not instantly connect the user with a piece of communication it ultimately fails. And I think some would argue communication is tied hand in hand with creating any good piece of art unless the intention is to be vague altogether.

    Sincerely,
    Joseph Maguire

    0
  43. 43

    One other thing. the S from smashing magazine is a perfect example of a well created favicon. its readable, and everyone who’s visited this site will recognize it.

    Sincerely,
    Joseph

    0
  44. 44

    Farid Abdulhadi

    June 27, 2008 2:15 am

    Google’s new favicon does look good. So does Smashing Magazine’s. Eden has also done a great job. I need to start work on mine, thanks for the reminder.

    0
  45. 45

    The best and most practical use of a Favicon is the W3C’s validator page. http://validator.w3.org/check?uri=referer

    If you see a green favicon, you know immediately that you page has passed validation and you can close the the window without waiting for the rest of the page to download.

    If it’s a Red Favicon, you’ve still got some work to do.

    0
  46. 46

    Perfect!Thanks Smashing Magazine.

    1
  47. 47

    great. maybe in another post you could write about animated favicons. I see lots of sites using animated favicons now.

    bye :)

    0
  48. 48

    hi !

    Look this favicon :

    studio76.fr
    exprime-rouen.fr
    yank.fr

    0

↑ Back to top