Actually it’s a pity that many designers don’t really make use of them. Favicons, mini graphics for a particular web-site, can be displayed in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. To be recognized immediately, Favicons have to be visually appealing and fit to the design or logo of a given page. In fact, if you use Favicons for your sites, users can easily find your URL in their bookmarks – in this way you create some kind of a visual connection between your web-site and your sites’ visitors.
However, the design of Favicons can be tricky – it isn’t that easy to create a beautiful 16x16px mini-icon. Still, some designers manage to achieve tremendous effects. Logotypes with clear geometric structures are easier to work with than typefaces or abstract images. The color selection corresponds to current Web 2.0 trends. Let’s take a look at 50 beautiful
Favicons you can inspire yourself from. You can click on Favicons – they lead to a page, which uses the image as a page icon. Links checked: June/05 2008.
Petal
 |
http://www.aurea.es/ |
 |
http://www.fxis.net/ (dead) |
 |
http://www.divshare.com/ |
 |
http://www.tanyamerone.com/ |
 |
http://www.akken.com/ |
 |
http://www.kepu.net.cn/english/ |
Rounded Elements
 |
http://www.fat-man-collective.com/ |
 |
http://www.lisensa.com/ (dead) |
 |
http://www.lorop-it.de/ (dead) |
 |
http://www.akamai.com |
 |
http://www.cogmap.com/ |
 |
http://www.colorwarepc.com/ |
 |
http://www.evozon.com/ |
 |
http://www.diabetesgate.de/ |
 |
http://www.adelaidemetro.com.au/ |
Letters and Typography
 |
http://www.cubexagency.com/ |
|
http://www.lisensa.com/ |
 |
http://www.somox.com/ |
 |
http://www.piqniq.jp/ |
 |
http://www.eight6.com/ |
 |
http://reachgroupconsulting.com/ |
 |
http://www.flexy.info/ |
 |
http://www.kiva.org/ |
Ornaments
 |
http://www.imthere.com/ |
 |
http://www.elevenmedia.com/ |
 |
http://www.roisure.com/ |
 |
http://www.pixellogo.com/ |
 |
http://www.thinkpinkstudio.com/ |
 |
http://www.mattwebb.com.au/ |
Squares
 |
http://www.sumagency.com/ |
 |
http://www.indesign.einsteiger-portal.de/ |
 |
http://www.kirkpatrickbank.com/ |
 |
http://deforum.ru/ |
 |
http://www.imasters.com.br/ |
 |
http://www.ouvaton.coop/ (dead) |
 |
http://detlog.org/ |
 |
http://www.ministrycamp.com/ (dead) |
 |
http://www.getpaint.net/ |
 |
http://microformats.org/ |
 |
http://www.kath-thun.ch/ |
 |
http://www.campus-and-more.de/ |
 |
http://pro-buero.com/ |
 |
http://www.quada-office.de |
 |
http://www.modulio.net/ |
Further Favicons
 |
http://www.joomlart.com/ |
 |
http://letterpop.com/ |
 |
http://www.illustrationclass.com/ |
 |
http://www.trendwatching.com/ |
 |
http://www.edag.hu/ |
 |
http://www.elektro.de/ |
Favicon Tools
Sven Lennartz Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books.
Advertising
Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
deprisa
January 31st, 2007 2:00 amSome of them are really really nice. Good little works… I think i am going to spend a while playing with the chami favicon generator tool.
;)
Chris Poteet
January 31st, 2007 2:00 amThanks! I really appreciate this site.
joey
January 31st, 2007 8:48 amThanks for putting Piqniq on there, we appreciate it!
One suggestion: how about adding HREF links to all of the sites?
Paul Stamatiou
January 31st, 2007 11:58 amI like my favicon – a dropshadow’d blue square with a white outline and a big “P” inside it.
Uzbek
January 31st, 2007 1:17 pmNice, but I guess you should rename the article to “Favico’s and Favico creation tools” or something…
I did like the tools rather than favicos… But you know, they set the kind of standart for favicon to create in the future…
Thanks,
Uzbek.
Maris Awris
January 31st, 2007 1:57 pmnice square design.
Dave Bowker
January 31st, 2007 2:17 pm2nd one down is the cream logo :P
…and the site logo is the same apart from a little bevel.
Chad
January 31st, 2007 3:07 pmYeah its pretty snuts what can be done with 16×16 pixels.
They are especially great when using tabs in Firefox.
Check mine out, letter c in a sparkle…
Geekoid
January 31st, 2007 3:52 pmWonder what Cingular would think of somox.com’s one! Looks almost identical to their logo. Color even matches.
Josiah Pugh
January 31st, 2007 6:16 pmSimply beautiful. I’ve found favicons the most difficult to design because of the 16×16 palette on which to work.
Ivan Minic
January 31st, 2007 6:35 pmVery nice… All these are so clean and colors are so nice!
adam buxton
January 31st, 2007 6:36 pmI have had a Favicon for a while, but only because I thought it was an interesting little thing to have did not consider the implications and practical uses of one until now. excellent article.
Stephan
January 31st, 2007 6:47 pmIt would be great to show some animated favicons here.
Jason Bates
January 31st, 2007 8:51 pmSome amazing favicons on show here. There certainly very remarkable.
milo
January 31st, 2007 10:25 pmPretty easy to make your own favicon without any helpers, reference it in the header.
Kate Mag
February 12th, 2007 5:38 pmgreat favicon resources, thanks
Erick S.
February 15th, 2007 3:46 amI am a big fan of Favicons! And I am actually quite proud of my own at my precious LINKAGE, a nice websites portal…It’s the head of the owl…Quite nice I think!
I resized a .GIF to get this result. It probably could be done better, but I like it this way.
apher
February 26th, 2007 2:23 pmThanks for your post.
i have made a favicon myself
Stephen
March 23rd, 2007 12:17 amYour own favicon breaks the rule that if an icon is square, don’t take it all the way to the margins! Put a pixel or so blank border around it. For circles, triangles, etc. you need that whole space. Have you ever seen a square application icon that uses all the space? Same in typography: rounded letters like O are taller than square letters like E. Pointy letters, like V in lighter weights of Futura go below the baseline.
Gina Mikel
April 17th, 2007 11:40 amMy attempt at favicons is at Scientific Illustrator dot com slash illustration slash favicons dot html (a dragonfly, a tick, a bubble, and a gladiola)
Ulli
June 21st, 2007 9:30 pmNice to see what is possible with a few pixels!
Ulli
NIck
July 3rd, 2007 2:56 pmNice, good to see what is possible, and these days most designers don’t go that extra mile and give the client something that helps portray the site so well. And now that a lot of bookmarks in your browser use them as well, it is that little extra effort that makes some of these stand out.
Teen Nude
July 17th, 2007 10:31 amReally good site!
thanks for the lists!
Danny D
August 27th, 2007 10:26 amThanks a lot, very interesting article , lots of leads.
I have bookmarked this site for future reading..Very good site.
Rosli
September 5th, 2007 10:25 amGreat site and I like the sharing. A lot of infos and I have generate a favicon for my site with my own picture =)
Prasanth
September 13th, 2007 5:42 amTrendwatching favicon is something that I admire. Though it looks very much like RSS icon, its pretty good.
اغاني
September 15th, 2007 12:13 pmI Really like these sweet icons
plz don’t forget to add some hearts:)
LGR
October 10th, 2007 5:27 amThose favicons are beautiful. Another tool I like to use to generate a favicon from an image is http://www.freefavicon.com/
They also have some favicons to download and use if people don’t feel like making their own.
knauf
October 25th, 2007 1:46 amNice collection – unfortunately none of these icons can be used for any other project. Perhaps you should make also a collection of open-source favicons which anybody could use on his webpage.
CafeTime
November 20th, 2007 7:27 amI have old favicon but good. You inspired me. THX
maximum
November 29th, 2007 5:14 amFurther Favicons is good!
dannydowney
January 6th, 2008 11:29 pmThis site never ceases to amaze me…great post. I will check out that tool.
Have another Great Year of Being a Smashing Magazine!
Ms. Techie
January 10th, 2008 3:44 amWay to go – love the collection of favicons.. some are quite well thought out – other than being the brand logo.
I like this site’s own favicon it stands out amongst other web browsers icons and is easily noticed…
Psy
January 21st, 2008 1:17 pmThanks for sharing!
Some icons are really really good. Nice little works!
Umar Farooq
January 23rd, 2008 10:26 amGreat Share!
Awesome stuff!!
Cheers!
WDG
January 28th, 2008 8:10 amNice collection!
I’ve just made mine, a simple yellow “W” on a blue background (check it out by clicking my name).
I’ve used the following free plugin from Telegraphics and PS CS3:
http://www.telegraphics.com.au/sw
A tip: start by creating a bigger document (64×64) then resize to 16×16 when you’re satisfied. Now you can save as ICO (Windows icon).
James
March 21st, 2008 3:00 amGreat post, I love icons to increase my navigation around windows, if I am working on a certain project. .I will add a suitable icon to save time when looking for files
Marcis Gasuns
March 22nd, 2008 12:16 pmSome are inspiring, the round ones are the best.
Evo08
March 23rd, 2008 2:56 pmReally needed this , thanx .
Alex
May 21st, 2008 1:14 pmIs there a way to add Favicon to site in my favorites that don’t already have them. I use the Favorites tool bar with just Favicons but as some sites don’t have Favicons they just have the sheet of paper.
Jason King
June 22nd, 2008 6:23 pmThat’s a good list of icons. Lots of primary colours and clean edges. Definitely inspiring stuff.
Susanne
June 25th, 2008 8:11 amI may sound very stupid, but HOW and WHERE exactly do I insert the favicon? I was told, somewhere in the “head” section, but I had no success so far. Please help!
Thanks.
Helen Skiles
August 5th, 2008 10:33 amI was told, somewhere in the “head” section…….
Please Susanne, lets not talk naughty here.
There may be children visiting my dear.
Dovid de Bresser
September 5th, 2008 3:51 amThere are some changes since the last time this page was updated.
Is dead link (or at least didn’t open in my browser):
http://www.lisensa.com/ (you have it twice, in the “Rounded Elements you notice the link is dead, but in the Letters and Typography you don’t)
Do not show any favicon (on my browser at least):
http://www.aurea.es/
http://www.imthere.com/
http://www.edag.hu/
Have a new favicon:
http://www.colorwarepc.com/
http://www.eight6.com/
Khaos
November 22nd, 2008 6:45 pmHola, Gracias por los favicon, necesistaba inspiración para crear el mío.
Saludos!!
yulia
January 20th, 2009 11:18 pmthanks for sharing
Claire
February 16th, 2009 1:58 amFavicons are something that both designers and customers agree on. To a customer, its a last touch, and adds that extra professionalism to the site. For a designer, its again a last touch, but for the customer, to make them like it and wow at it.
Hakki
February 27th, 2009 10:39 amVery nice post, its quite remarkable how effective some of these favicons are given the tiny real estate.
My Medical Note
April 23rd, 2009 1:02 amThe favicons are really great and inspiring. I was about designing one for my medical blog when I googled top favicon only to see your site on no one.
there are all simple and great
masjaliteng
April 25th, 2009 8:13 amthank you for this great info…
kak
April 26th, 2009 7:22 pmgreat post. thank you
YoungGold
May 12th, 2009 12:03 pmalso if you wish to create your own favicon there are ways in which you can use photoshop or Fireworks to create one and then download a file which rewrites the image into a .ico file
campuscodi
May 28th, 2009 3:00 amactually it’s not that difficult to create a favicon
the tutorials on the net are all wrong
just create a 32×32 png with your desired design and then rename it using total commander with the .ico extension
don’t resize it
code the website to use that favicon and voilaaa!
look what great result I got using my technique on iasisevens.com
Armig Esfahani
June 27th, 2009 10:24 pmI like the ornaments the most i think Matt Webb did great job..
thank you for the post.. so useful specially the tools..
noterc
September 30th, 2009 11:29 pmThank you so much, i will get to work on my own favicon now.
bruceslogos
October 12th, 2009 10:10 pmThank you for sharing this collection of remarkable favicons
Jake
January 29th, 2010 8:16 pmHave you seen the MeetWays.com favicon, I think is fabulous and so simple and well done. I think it should be included in this list. Check it out at http://www.meetways.com
Michael Sparks
February 16th, 2010 6:59 pmJust made my 1st Favicon! Check it out!
spaxshop.com Something like 150 hand animated frames of 16 x 16 pixels..
Peter Brazier
March 14th, 2010 3:55 amThe First one in the Squares section isn’t sumagencys! is actually from http://www.nosotroshq.com/ :)
Obzor
April 11th, 2010 11:34 pmGreat article. Do not stop!
DICKSON
September 19th, 2010 5:01 amalert( /hacked go away/.source)
auki
September 29th, 2010 10:45 amWe from mybusinesslogo com appriciate the inspiration for our logo’s
wellwisher
January 27th, 2011 11:36 pmGreat website. Got lots of information about favicon from this website. Even I have designed my own favicon from the help of this website.
Thanks Again. Keep updating new favicons too.
Cole
July 30th, 2011 8:19 pmUnfortunately, most of these don’t give you a good idea what the website is about. They’re just ornamental and, to me, that’s kinda failuriffic. I far prefer basic initials, like Smashing Magazine’s favorite icon. It’s easier for me to associate than abstract designs.
AZ
September 29th, 2011 8:28 amNice collection, food for thought. Though I agree somewhat with Cole above. Favicons can be a great challenge in creating maximum impact with minimal pixels
svella
October 11th, 2011 7:49 aminteresting… note how the SmashingMagazine favicon is very close to the old Salon.com Favi….