Creative Favicons: Tiny Artwork
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:
- Part 1: Inspire Yourself: 50 Remarkable Favicons
- Part 2: Inspire Yourself: More Creative Favicons
- Part 3: Creative Favicons: When Small Is Beautiful
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.
Animated favicons are sometimes used, however it’s rather an exception.
![]()
![]()







shashi arya
September 11th, 2007 11:12 pmAs usual GR8 post…..
Congrats to Smashing Magazine TEAM on completion of ONE year.
Jente
September 11th, 2007 11:16 pmNice 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.
Maruder
September 11th, 2007 11:17 pmHey… I can’t see the “S”mashing icon on that list :)
Matt
September 11th, 2007 11:27 pmMy anchor icon didn’t make the cut :( Either way lovely collection and thanks for keeping up the great work!
Lica
September 11th, 2007 11:35 pmI 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.
Sjarel
September 11th, 2007 11:47 pmMine didn’t make the cut either, although I think it’s really worth it. Maybe next time :-)
Starfeeder
September 11th, 2007 11:58 pmWhoa I never knew you could animate an favicon :o
ideas poppin
Randa Clay
September 12th, 2007 12:01 amLove that SlideShare icon! Hey, thanks for the mention- what a surprise!
Matt Radel
September 12th, 2007 12:21 amI love favicons – adds a little splash of life to an otherwise dull address bar.
Evangelist
September 12th, 2007 1:41 amGreat post again – some very crisp icons in there :)
Angel
September 12th, 2007 2:41 amWhere can you host .ico files for free?
or are gifs fine when using favicons?
Evan Meagher
September 12th, 2007 6:08 amYes, Angel, gif’s work for favicons.
Numen
September 12th, 2007 7:45 amHow do you make a Favicon???
Any links or books or articles?
adit
September 12th, 2007 8:05 amThanks for the list guys, motivated me to change the one on a site I’m working on.
pingoogle
September 12th, 2007 11:33 amWOW!!! thanks for the great list. check out smashing’s favicon!
i like it!!
Gordon
September 12th, 2007 6:26 pmInspiration 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?
Yizi
September 12th, 2007 8:51 pmSmashing post as always, been checking this website for few moths now and I improved a lot,
Thanks guys.
Alvaro
September 12th, 2007 8:55 pmGreat Post!
Adam
September 13th, 2007 8:08 amNice list!
you have a double up for content with style (wrong favicon) and rAndom international (correct favicon)
webtuga
September 13th, 2007 8:58 amMaravilious!
Randolph
September 13th, 2007 4:03 pmHappy Anniversary Smashing Magazine!
Josh
September 15th, 2007 5:34 amI’d like to see a set just on 3D favicons. very cool.
junde
September 15th, 2007 5:34 pmhey thanks so much for mentioning techsailor!
Samir Shah
September 15th, 2007 1:37 amHappy Anniversary Smashing Magazine!
Its Really Great Article.
Thanks
Samir Shah
Tom
January 18th, 2008 12:29 amgreat article.
Nice example favicons
Mindloop Webdesign
January 30th, 2008 8:37 amNice list, all tough some of them do look a bit generic
Ken
March 22nd, 2008 9:44 pmGlad I have dropped by. This is great!
Referáty
June 11th, 2008 3:09 amGreat list :)
As list of wordpress themes!
yoxx
September 17th, 2008 8:26 pmwhat about missing icon #31, porcupine.gr ?
Jen}
October 7th, 2011 2:02 pmThanks Sven Lennartz for the share