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

Creative Favicons: Tiny Artwork

Advertisement

Since visual elements are easier to remember, they can be used to draw visitors’ attention to the brand identity of the site. As visual indicators, favicons can establish the communication with visitors and make a web-site easier to remember and also easier to get back to once you need it – for instance, once the users look for the site in their bookmarks. Still most sites don’t make use of them – just like 404-error-pages, favicons are often forgotten or simply ignored. It’s time to change that, folks.

Every once and again we present some of the most creative and beautiful favicons — to prompt you to design them for your sites. In fact, we are willing to do that until the trend is finally established.

The design of favicons might look like a simple task; however to

  • make the design recognizable,
  • keep the design simple,
  • support visual identity,
  • ensure visual clarity,
  • design within a 16×16 rectangle

is a creative challenge you shouldn’t underestimate. The details build the foundation of a successful logo, and to take care of the smallest details is extremely important for a usable and visually appealing favicon.

The images below can be clicked – apparently, they lead to the sites from which the favicons have been taken. The examples show not only how a well-designed favicon might look like, but also which creative approaches can be used to give a favicon the freshness and clarity it deserves. The examples also demonstrate how favicons can support the overall design of the site it is being used on.

You can find further favicon-showcases and some more information in the posts we’ve published before:

Slideshare in Creative Favicons: Tiny Artwork

First of all, the favicon from SlideShare, one of our all times favorites. It’s just a small logo, but works perfectly as an eye-catching attraction.

Mygoya in Creative Favicons: Tiny Artwork

Animated favicons are sometimes used, however it’s rather an exception.
Guigalaxy-fav in Creative Favicons: Tiny Artwork

Infosthetics-fav in Creative Favicons: Tiny Artwork

Random-fav in Creative Favicons: Tiny Artwork

Pixelgraphix-fav in Creative Favicons: Tiny Artwork

Screencasting-fav in Creative Favicons: Tiny Artwork

Contentwithstyle-fav in Creative Favicons: Tiny Artwork

Designdrive-fav in Creative Favicons: Tiny Artwork

Yuuguu in Creative Favicons: Tiny Artwork

Fancast in Creative Favicons: Tiny Artwork

Zoominfo in Creative Favicons: Tiny Artwork

Guessnow in Creative Favicons: Tiny Artwork

Litmus in Creative Favicons: Tiny Artwork

Conversio in Creative Favicons: Tiny Artwork

Closerlook in Creative Favicons: Tiny Artwork

Lanico in Creative Favicons: Tiny Artwork

Zukool in Creative Favicons: Tiny Artwork

Binarymoon-fav in Creative Favicons: Tiny Artwork

Cetismedia in Creative Favicons: Tiny Artwork

Office in Creative Favicons: Tiny Artwork

Stikies in Creative Favicons: Tiny Artwork

Early in Creative Favicons: Tiny Artwork

Sensitive in Creative Favicons: Tiny Artwork

Schramme in Creative Favicons: Tiny Artwork

Dawebsite in Creative Favicons: Tiny Artwork

Webpuppies in Creative Favicons: Tiny Artwork

Radiohead in Creative Favicons: Tiny Artwork

Revolution in Creative Favicons: Tiny Artwork

Porcupine in Creative Favicons: Tiny Artwork

Ericzoo in Creative Favicons: Tiny Artwork

Randaclay in Creative Favicons: Tiny Artwork

Jjot in Creative Favicons: Tiny Artwork

Pixelyzed in Creative Favicons: Tiny Artwork

Doreo in Creative Favicons: Tiny Artwork

Update in Creative Favicons: Tiny Artwork

Techsailor in Creative Favicons: Tiny Artwork

Conversionrater in Creative Favicons: Tiny Artwork

W3counter in Creative Favicons: Tiny Artwork

Inserit in Creative Favicons: Tiny Artwork

Textbroker in Creative Favicons: Tiny Artwork

Minionion in Creative Favicons: Tiny Artwork

A123 in Creative Favicons: Tiny Artwork

Jumpstart in Creative Favicons: Tiny Artwork

Barney in Creative Favicons: Tiny Artwork

Tipped in Creative Favicons: Tiny Artwork

Dreamtime in Creative Favicons: Tiny Artwork

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 (No votes yet)
Loading ... Loading ...

Tags: , , ,

Advertising
  1. 1
    shashi arya
    September 11th, 2007 11:12 pm

    As usual GR8 post…..
    Congrats to Smashing Magazine TEAM on completion of ONE year.

  2. 2
    Jente
    September 11th, 2007 11:16 pm

    Nice collection, mostly the favicon is the last thing a designers mind, I often forget about them, but if favicons are done the right way it’s an extra eyecatcher of a site.

  3. 3
    Maruder
    September 11th, 2007 11:17 pm

    Hey… I can’t see the “S”mashing icon on that list :)

  4. 4
    Matt
    September 11th, 2007 11:27 pm

    My anchor icon didn’t make the cut :( Either way lovely collection and thanks for keeping up the great work!

  5. 5
    Lica
    September 11th, 2007 11:35 pm

    I love favicons!! They are the icing on the cake. But they are a bit of a pain in IE6. I’m surprised it wasn’t mentioned.

  6. 6
    Sjarel
    September 11th, 2007 11:47 pm

    Mine didn’t make the cut either, although I think it’s really worth it. Maybe next time :-)

  7. 7
    Starfeeder
    September 11th, 2007 11:58 pm

    Whoa I never knew you could animate an favicon :o

    ideas poppin

  8. 8
    Randa Clay
    September 12th, 2007 12:01 am

    Love that SlideShare icon! Hey, thanks for the mention- what a surprise!

  9. 9
    Matt Radel
    September 12th, 2007 12:21 am

    I love favicons – adds a little splash of life to an otherwise dull address bar.

  10. 10
    Evangelist
    September 12th, 2007 1:41 am

    Great post again – some very crisp icons in there :)

  11. 11
    Angel
    September 12th, 2007 2:41 am

    Where can you host .ico files for free?

    or are gifs fine when using favicons?

  12. 12
    Evan Meagher
    September 12th, 2007 6:08 am

    Yes, Angel, gif’s work for favicons.

  13. 13
    Numen
    September 12th, 2007 7:45 am

    How do you make a Favicon???
    Any links or books or articles?

  14. 14
    adit
    September 12th, 2007 8:05 am

    Thanks for the list guys, motivated me to change the one on a site I’m working on.

  15. 15
    pingoogle
    September 12th, 2007 11:33 am

    WOW!!! thanks for the great list. check out smashing’s favicon!
    i like it!!

  16. 16
    Gordon
    September 12th, 2007 6:26 pm

    Inspiration is one thing, but some tips and tools on how to create good ones would be nice.

    Is it better to work in PhotoShop and shrink down (as I did), or go with an icon editor and do it at scale?

  17. 17
    Yizi
    September 12th, 2007 8:51 pm

    Smashing post as always, been checking this website for few moths now and I improved a lot,

    Thanks guys.

  18. 18
    Alvaro
    September 12th, 2007 8:55 pm

    Great Post!

  19. 19
    Adam
    September 13th, 2007 8:08 am

    Nice list!

    you have a double up for content with style (wrong favicon) and rAndom international (correct favicon)

  20. 20
    webtuga
    September 13th, 2007 8:58 am

    Maravilious!

  21. 21
    Randolph
    September 13th, 2007 4:03 pm

    Happy Anniversary Smashing Magazine!

  22. 22
    Josh
    September 15th, 2007 5:34 am

    I’d like to see a set just on 3D favicons. very cool.

  23. 23
    junde
    September 15th, 2007 5:34 pm

    hey thanks so much for mentioning techsailor!

  24. 24
    Samir Shah
    September 15th, 2007 1:37 am

    Happy Anniversary Smashing Magazine!

    Its Really Great Article.

    Thanks

    Samir Shah

  25. 25
    Tom
    January 18th, 2008 12:29 am

    great article.
    Nice example favicons

  26. 26
    Mindloop Webdesign
    January 30th, 2008 8:37 am

    Nice list, all tough some of them do look a bit generic

  27. 27
    Ken
    March 22nd, 2008 9:44 pm

    Glad I have dropped by. This is great!

  28. 28
    Referáty
    June 11th, 2008 3:09 am

    Great list :)
    As list of wordpress themes!

  29. 29
    yoxx
    September 17th, 2008 8:26 pm

    what about missing icon #31, porcupine.gr ?

  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
Post your job