Popular Tags

Smashing Magazine - we smash you with the information that will make your life easier. really.

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 Google. 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:

Google in Favicon Episode 7

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

Google-yg-3 in Favicon Episode 7

…or like this:

Google-vn-4 in Favicon Episode 7

…and this is how the favicon could look like:

Gnew in Favicon Episode 7

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

Nk in Favicon Episode 7NK Interactive
Denniskleine in Favicon Episode 7Dennis Kleine
Ninja in Favicon Episode 7Design by Ninjas
Vivabit in Favicon Episode 7Vivabit
Type in Favicon Episode 7Our Type
Serif in Favicon Episode 7The Serif
Fakeblog in Favicon Episode 7Fakeblog
Shawn in Favicon Episode 7Shaun Inman
Singu in Favicon Episode 7Singularity Conference
Urbanchip in Favicon Episode 7urbanchip
Coolhunting in Favicon Episode 7Cool Hunting
Mutum in Favicon Episode 7Mutum Sigillum
Hongkiat in Favicon Episode 7Hongkiat
Boxes in Favicon Episode 7Boxes and Arrows
Dm2 in Favicon Episode 7DM2interactive
Remixies in Favicon Episode 7funkyremixes

Blue and Green

Rhaya in Favicon Episode 7Rhaya
Fused in Favicon Episode 7Fused Network
Urban in Favicon Episode 7urbanphes
Eliectricurrent in Favicon Episode 7eliectricurrent
Arhibet in Favicon Episode 7arhibet
Eden in Favicon Episode 7Eden
Quadro in Favicon Episode 7Quadrifolia
Twirl in Favicon Episode 7Twhirl
Laterloop in Favicon Episode 7laterloop
Jeux in Favicon Episode 7Jeux de Maux
Emtwo in Favicon Episode 7emtwo
Visible in Favicon Episode 7visible.net
Sas in Favicon Episode 7SAS
Infinity in Favicon Episode 7Infinity Art
Teddy in Favicon Episode 7Teddy Hwang
Custom in Favicon Episode 7Get a Freelancer

Drawn

Wagner in Favicon Episode 7wagner graphics
Sunce in Favicon Episode 7Sail Select
Arty in Favicon Episode 7Arty Crooks
Smug in Favicon Episode 7SmugMug

Orange & Red

Anaconsol in Favicon Episode 7anaconsol
Headscape in Favicon Episode 7Headscape
Nickstedt in Favicon Episode 7nickstedt web
Hebatec in Favicon Episode 7HEBAtec
Panoye in Favicon Episode 7Panoye
Toolbox in Favicon Episode 7Designer’s Toolbox
Keinu in Favicon Episode 7Keinu
Suggestname in Favicon Episode 7suggest.name
Ebugogo in Favicon Episode 7Ebugogo
Fruit in Favicon Episode 7Fruit
Lumurs in Favicon Episode 7iPhone Lemurs
Archiving in Favicon Episode 7Capture All
Egyedi in Favicon Episode 7Pro Webdesign
Srout in Favicon Episode 7Sprout
Heard in Favicon Episode 7Overheard in New York
Toomix in Favicon Episode 7Toomix
Mix in Favicon Episode 7Mixx
Faveup in Favicon Episode 7Faveup
Computerlove in Favicon Episode 7Computerlove
Cha in Favicon Episode 7ChaCha
Popartblog in Favicon Episode 7Pop Art Blog
Colorcubic in Favicon Episode 7colorcubic
Barriere in Favicon Episode 7Barrierekompass

Other

Infosthetics in Favicon Episode 7Infosthetics
Rgb in Favicon Episode 7rgb6
Morecss in Favicon Episode 7yellowgreen
Uby in Favicon Episode 7turistik.cz
Digitalmash in Favicon Episode 7Digialmesh
Proteinos in Favicon Episode 7Protein OS
Kean in Favicon Episode 7Kean Richmond
Xenvps in Favicon Episode 7Xen

Extremely colorful favicons

Loading in Favicon Episode 7Salle Polyvalente
Alx in Favicon Episode 7ALXA

The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    Mayank Patel
    June 24th, 2008 3:06 am

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

    Mayank

  2. 2
    prathap
    June 24th, 2008 3:07 am

    extremely good

  3. 3
    Wade
    June 24th, 2008 3:14 am

    Cool, loving the mini Art! :)

  4. 4
    Natrium
    June 24th, 2008 3:14 am

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

  5. 5
    Erik Reagan
    June 24th, 2008 3:19 am

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

  6. 6
    IsmSal
    June 24th, 2008 3:23 am

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

  7. 7
    BT
    June 24th, 2008 3:36 am

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

  8. 8
    sundaydriver
    June 24th, 2008 3:56 am

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

  9. 9
    ptamaro
    June 24th, 2008 4:23 am

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

  10. 10
    Kean
    June 24th, 2008 4:30 am

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

  11. 11
    Steve Killen
    June 24th, 2008 4:34 am

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

  12. 12
    Tadd Mencer
    June 24th, 2008 4:41 am

    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.

  13. 13
    Yury Akulin
    June 24th, 2008 4:53 am

    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/

  14. 14
    latejedora
    June 24th, 2008 5:11 am

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

  15. 15
    Marie
    June 24th, 2008 5:12 am

    Google could really use a new favicon…

  16. 16
    Raul Riera
    June 24th, 2008 5:20 am

    Can the favicons be animated?

  17. 17
    rezr
    June 24th, 2008 5:22 am

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

  18. 18
    la lène
    June 24th, 2008 5:55 am

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

  19. 19
    Carlos Taborda
    June 24th, 2008 6:03 am

    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

  20. 20
    antipix
    June 24th, 2008 6:53 am

    salle polyvalente’s favicon makes me sick!

  21. 21
    WebGyver
    June 24th, 2008 8:10 am

    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.

  22. 22
    Lâm
    June 24th, 2008 8:17 am

    Check mine, it’s animated and lovely :)

    http://www.monsieurlam.com/

  23. 23
    Mel
    June 24th, 2008 8:27 am

    Thanks for including Emtwo’s favicon!

  24. 24
    Krista Sanders
    June 24th, 2008 9:38 am

    Thank you for including the iphone lemurs favicon!

  25. 25
    zero0x
    June 24th, 2008 9:40 am

    extreme colorful looks awful :D

  26. 26
    mike harris
    June 24th, 2008 10:15 am

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

  27. 27
    Josh
    June 24th, 2008 11:03 am

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

  28. 28
    Stankiewicz
    June 24th, 2008 12:19 pm

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

  29. 29
    Lindsay
    June 24th, 2008 1:05 pm

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

  30. 30
    Thomas Milburn
    June 24th, 2008 1:13 pm

    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.

  31. 31
    Rodder Shen
    June 24th, 2008 1:46 pm

    I love this one http://www.gotocss3.com/

  32. 32
    Cho. P
    June 24th, 2008 2:33 pm

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

  33. 33
    Lisa
    June 24th, 2008 2:51 pm

    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.

  34. 34
    hongkiat
    June 24th, 2008 6:42 pm

    Thanks for the mentioned :-)

  35. 35
    Two Socks
    June 24th, 2008 10:12 pm

    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 !

  36. 36
    kristarella
    June 24th, 2008 10:43 pm

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

    I especially like Our Type and Fakeblog.

  37. 37
    Aaron Riddle
    June 25th, 2008 8:31 am

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

  38. 38
    ferdhie
    June 25th, 2008 8:46 am

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

  39. 39
    Dan Grahn
    June 25th, 2008 9:15 am

    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.

  40. 40
    Lahure_dai
    June 26th, 2008 7:02 am

    hello smashing, these are cool favicon.

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

  41. 41
    Visible.net
    June 26th, 2008 8:10 am

    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.

  42. 42
    Joseph Maguire
    June 26th, 2008 8:55 am

    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

  43. 43
    Joseph Maguire
    June 26th, 2008 8:57 am

    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

  44. 44
    Farid Abdulhadi
    June 27th, 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.

  45. 45
    riki
    August 1st, 2008 4:06 am

    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.

  46. 46
    Gökhan Yavuz
    September 16th, 2008 9:59 am

    Perfect!Thanks Smashing Magazine.

  47. 47
    Ignacio
    November 23rd, 2008 6:47 am

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

    bye :)

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

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!



Advertisement Advertise with us!
Join in Smashing Forum
  • My Resume Design

    http://samgarfield.com/SamGarfield2.pdfWould love some feedback.…

  • Re: CSS & CMS

    Is it possible to apply any CSS template to any CMS specifically WordPress? I am a newbie to CMS...however, I see a template that I…

  • Re: New website design for my web design company

    @silvia laucirica - Thanks for the feedback. I definitely agree the facebook and twitter icons need to stand out more so we'll…

  • Re: My new Portfolio Website

    www.tizag.com is a good one for step by step walk throughs. Really handy to get a good understanding…

  • Re: CSS & CMS

    its possible but your best off just finding a wordpress theme

Post your job
Advertisement