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

Creative Favicons: Tiny Artwork

By Smashing Editorial, September 11th, 2007 in Graphics | 73 Comments | Forum

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:

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.

Published in Graphics, September 11th, 2007
Tags: creative, favicons, icons, logos

1.

shashi arya (September 11th, 2007, 11:12 pm)

As usual GR8 post…..
Congrats to Smashing Magazine TEAM on completion of ONE year.
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.

Maruder (September 11th, 2007, 11:17 pm)

Hey… I can’t see the “S”mashing icon on that list :)
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.

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.

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.

Starfeeder (September 11th, 2007, 11:58 pm)

Whoa I never knew you could animate an favicon :o

ideas poppin
8.

Randa Clay (September 12th, 2007, 12:01 am)

Love that SlideShare icon! Hey, thanks for the mention- what a surprise!
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.

MrsCommunication (September 12th, 2007, 12:50 am)

Thanks for the collection. I enjoy the following favicons:

Link [www.parenthacks.com] (their logo is dang cute)
Link [www.asmallorange.com]
11.

Luke Seeley (September 12th, 2007, 12:59 am)

Nothing beats a good favicon.

What do you guys think of Link [lukees.com]?

Go Link [www.html-kit.com] to make your own…
12.

Evangelist (September 12th, 2007, 1:41 am)

Great post again - some very crisp icons in there :)
13.

Angel (September 12th, 2007, 2:41 am)

Where can you host .ico files for free?

or are gifs fine when using favicons?
14.

Alexander Hahn (September 12th, 2007, 3:39 am)

Su true a good favicon is that necessary when it comes to bookmarks!

What do you guys think of Link [keasone.de]?

kindest regards!

plus: Link [favicon2dots.com] is a sweetie when it comes to favicon love!
15.

Evan Meagher (September 12th, 2007, 6:08 am)

Yes, Angel, gif’s work for favicons.
16.

Numen (September 12th, 2007, 7:45 am)

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

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

Adrian (September 12th, 2007, 9:07 am)

Hey Numen,

Learn here: Link [www.adrianherritt.com].

or, go the Link [www.html-kit.com] that Luke Seeley linked.
19.

Adam R. (September 12th, 2007, 10:28 am)

For my site, I tried to keep the favicon in line with my logo.

My logo has the word BUY as the center of it, so I threw the letter B in my icon. Check it out:

Link [www.whencanbuyit.com]
20.

pingoogle (September 12th, 2007, 11:33 am)

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

Gavin (September 12th, 2007, 1:01 pm)

Favicons are definitely one of the most forgotten items, I find that websites with favicons are so much easier to locate in bookmarks and when you have multiple tabs open.

I hope it’s ok to post it, but I’ve got a little online favicon generator here (there’s no advertising on it):
Link [gavinbenda.com.au]
22.

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?
23.

Stu Smith (September 12th, 2007, 7:16 pm)

Of course, what works for favicons will also work for program icons…

Hope you don’t mind me mentioning ours: what impressed me about what our graphic designer did for ours was to change the whole shape of the logo for the tiny icon: the larger ones are circular, but there was no definition when shrunk to 16×16, so he changed the shape. I was really pleased with how it all turned out.

You can see the large and the small here:

Link [www.feedghost.com]

Stu
24.

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

Alvaro (September 12th, 2007, 8:55 pm)

Great Post!
26.

Adam (September 12th, 2007, 9:59 pm)

Nice article ..
I quite link group94s .. Link [www.group94.com]
27.

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)
28.

Aaron (September 13th, 2007, 8:48 am)

You forgot mine ;)

Link [www.stoodeo.com]
29.

webtuga (September 13th, 2007, 8:58 am)

Maravilious!
30.

Randolph (September 13th, 2007, 4:03 pm)

Happy Anniversary Smashing Magazine!
31.

Dave (September 13th, 2007, 6:57 pm)

What about the fav icon from Link [www.hottogs.com] that’s nice too! :)

Dave
32.

Samir Shah (September 15th, 2007, 1:37 am)

Happy Anniversary Smashing Magazine!

Its Really Great Article.

Thanks

Samir Shah - co-founder
Link [www.eatingout.co.in]
33.

Josh (September 15th, 2007, 5:34 am)

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

San (September 15th, 2007, 5:22 pm)

Have a look at this logo Link [www.stu-c.com]
its quite similar to Smashing Magazine’s
35.

junde (September 15th, 2007, 5:34 pm)

hey thanks so much for mentioning techsailor!
36.

Andy Gongea (September 17th, 2007, 9:33 pm)

i like mine also :D

Link [www.nextlimits.com]
37.

Jesper (September 18th, 2007, 7:54 pm)

I kinda like the animated favicon of Link [www.musicovery.com]
38.

Peter White (September 26th, 2007, 8:39 pm)

See the great Link [www.favicon.cc] at Link [www.favicon.cc]
39.

gravis (December 6th, 2007, 9:17 pm)

A new great site Link [www.faviconize.com] is up. Vote, add and create favourite liststs from the best favicons fo whole internet ;)
40.

Sir Pavlow (January 1st, 2008, 2:03 pm)

My animated favicon –>> Link [www.listeniz.net]
41.

Tom (January 18th, 2008, 12:29 am)

great article.
Nice example favicons
42.

Mindloop Webdesign (January 30th, 2008, 8:37 am)

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

Ken (March 22nd, 2008, 9:44 pm)

Glad I have dropped by. This is great!
44.

Referáty (June 11th, 2008, 3:09 am)

Great list :)
As list of wordpress themes!
45.

yoxx (September 17th, 2008, 8:26 pm)

what about missing icon #31, porcupine.gr ?
46.

Durann (May 21st, 2009, 5:04 pm)

How much would you charge me to put a favicon on my business website. I already have the favicon. Please contact me ASAP.

THANK YOU
Durann