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

Inspire Yourself: 50 Remarkable Favicons

Advertisement

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 16×16px 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

Aurea in Inspire Yourself: 50 Remarkable Faviconshttp://www.aurea.es/
Flex in Inspire Yourself: 50 Remarkable Faviconshttp://www.fxis.net/ (dead)
Divshare in Inspire Yourself: 50 Remarkable Faviconshttp://www.divshare.com/
Tanya in Inspire Yourself: 50 Remarkable Faviconshttp://www.tanyamerone.com/
Akken in Inspire Yourself: 50 Remarkable Faviconshttp://www.akken.com/
Kepu in Inspire Yourself: 50 Remarkable Faviconshttp://www.kepu.net.cn/english/

Rounded Elements

Fat in Inspire Yourself: 50 Remarkable Faviconshttp://www.fat-man-collective.com/
Lisensa in Inspire Yourself: 50 Remarkable Faviconshttp://www.lisensa.com/ (dead)
3a in Inspire Yourself: 50 Remarkable Faviconshttp://www.lorop-it.de/ (dead)
Fav-10 in Inspire Yourself: 50 Remarkable Faviconshttp://www.akamai.com
Cog in Inspire Yourself: 50 Remarkable Faviconshttp://www.cogmap.com/
Colorw in Inspire Yourself: 50 Remarkable Faviconshttp://www.colorwarepc.com/
Evozon in Inspire Yourself: 50 Remarkable Faviconshttp://www.evozon.com/
7a in Inspire Yourself: 50 Remarkable Faviconshttp://www.diabetesgate.de/
Fav-11 in Inspire Yourself: 50 Remarkable Faviconshttp://www.adelaidemetro.com.au/

Letters and Typography

Cubex in Inspire Yourself: 50 Remarkable Faviconshttp://www.cubexagency.com/
Lisensa in Inspire Yourself: 50 Remarkable Faviconshttp://www.lisensa.com/
Somox in Inspire Yourself: 50 Remarkable Faviconshttp://www.somox.com/
Ping in Inspire Yourself: 50 Remarkable Faviconshttp://www.piqniq.jp/
E6 in Inspire Yourself: 50 Remarkable Faviconshttp://www.eight6.com/
Rg in Inspire Yourself: 50 Remarkable Faviconshttp://reachgroupconsulting.com/
Flex2 in Inspire Yourself: 50 Remarkable Faviconshttp://www.flexy.info/
Kiva in Inspire Yourself: 50 Remarkable Faviconshttp://www.kiva.org/

Ornaments

Imthere in Inspire Yourself: 50 Remarkable Faviconshttp://www.imthere.com/
Eleven in Inspire Yourself: 50 Remarkable Faviconshttp://www.elevenmedia.com/
Roisure in Inspire Yourself: 50 Remarkable Faviconshttp://www.roisure.com/
Pixellogo in Inspire Yourself: 50 Remarkable Faviconshttp://www.pixellogo.com/
Thinkpink in Inspire Yourself: 50 Remarkable Faviconshttp://www.thinkpinkstudio.com/
Matwebb in Inspire Yourself: 50 Remarkable Faviconshttp://www.mattwebb.com.au/

Squares

Suma in Inspire Yourself: 50 Remarkable Faviconshttp://www.sumagency.com/
1a in Inspire Yourself: 50 Remarkable Faviconshttp://www.indesign.einsteiger-portal.de/
Fav-5 in Inspire Yourself: 50 Remarkable Faviconshttp://www.kirkpatrickbank.com/
Deforum in Inspire Yourself: 50 Remarkable Faviconshttp://deforum.ru/
Imasters in Inspire Yourself: 50 Remarkable Faviconshttp://www.imasters.com.br/
9a in Inspire Yourself: 50 Remarkable Faviconshttp://www.ouvaton.coop/ (dead)
Detlog in Inspire Yourself: 50 Remarkable Faviconshttp://detlog.org/
Minis in Inspire Yourself: 50 Remarkable Faviconshttp://www.ministrycamp.com/ (dead)
Paint in Inspire Yourself: 50 Remarkable Faviconshttp://www.getpaint.net/
Micro in Inspire Yourself: 50 Remarkable Faviconshttp://microformats.org/
4a in Inspire Yourself: 50 Remarkable Faviconshttp://www.kath-thun.ch/
5a in Inspire Yourself: 50 Remarkable Faviconshttp://www.campus-and-more.de/
Fav-1 in Inspire Yourself: 50 Remarkable Faviconshttp://pro-buero.com/
Fav-7 in Inspire Yourself: 50 Remarkable Faviconshttp://www.quada-office.de
Fav-9 in Inspire Yourself: 50 Remarkable Faviconshttp://www.modulio.net/

Further Favicons

Joomla in Inspire Yourself: 50 Remarkable Faviconshttp://www.joomlart.com/
Letterpop in Inspire Yourself: 50 Remarkable Faviconshttp://letterpop.com/
Illust in Inspire Yourself: 50 Remarkable Faviconshttp://www.illustrationclass.com/
2a in Inspire Yourself: 50 Remarkable Faviconshttp://www.trendwatching.com/
8a in Inspire Yourself: 50 Remarkable Faviconshttp://www.edag.hu/
10a in Inspire Yourself: 50 Remarkable Faviconshttp://www.elektro.de/

Favicon Tools

Sven Lennartz

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 (2 votes, average: 5.00 out of 5)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    deprisa
    January 31st, 2007 2:00 am

    Some 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.
    ;)

    Reply
  2. 2
    Chris Poteet
    January 31st, 2007 2:00 am

    Thanks! I really appreciate this site.

    Reply
  3. 3
    joey
    January 31st, 2007 8:48 am

    Thanks for putting Piqniq on there, we appreciate it!

    One suggestion: how about adding HREF links to all of the sites?

    Reply
  4. 4
    Paul Stamatiou
    January 31st, 2007 11:58 am

    I like my favicon – a dropshadow’d blue square with a white outline and a big “P” inside it.

    Reply
  5. 5
    Uzbek
    January 31st, 2007 1:17 pm

    Nice, 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.

    Reply
  6. 6
    Maris Awris
    January 31st, 2007 1:57 pm

    nice square design.

    Reply
  7. 7
    Dave Bowker
    January 31st, 2007 2:17 pm

    2nd one down is the cream logo :P

    …and the site logo is the same apart from a little bevel.

    Reply
  8. 8
    Chad
    January 31st, 2007 3:07 pm

    Yeah 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…

    Reply
  9. 9
    Geekoid
    January 31st, 2007 3:52 pm

    Wonder what Cingular would think of somox.com’s one! Looks almost identical to their logo. Color even matches.

    Reply
  10. 10
    Josiah Pugh
    January 31st, 2007 6:16 pm

    Simply beautiful. I’ve found favicons the most difficult to design because of the 16×16 palette on which to work.

    Reply
  11. 11
    Ivan Minic
    January 31st, 2007 6:35 pm

    Very nice… All these are so clean and colors are so nice!

    Reply
  12. 12
    adam buxton
    January 31st, 2007 6:36 pm

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

    Reply
  13. 13
    Stephan
    January 31st, 2007 6:47 pm

    It would be great to show some animated favicons here.

    Reply
  14. 14
    Jason Bates
    January 31st, 2007 8:51 pm

    Some amazing favicons on show here. There certainly very remarkable.

    Reply
  15. 15
    milo
    January 31st, 2007 10:25 pm

    Pretty easy to make your own favicon without any helpers, reference it in the header.

    Reply
  16. 16
    Kate Mag
    February 12th, 2007 5:38 pm

    great favicon resources, thanks

    Reply
  17. 17
    Erick S.
    February 15th, 2007 3:46 am

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

    Reply
  18. 18
    apher
    February 26th, 2007 2:23 pm

    Thanks for your post.
    i have made a favicon myself

    Reply
  19. 19
    Stephen
    March 23rd, 2007 12:17 am

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

    Reply
  20. 20
    Gina Mikel
    April 17th, 2007 11:40 am

    My attempt at favicons is at Scientific Illustrator dot com slash illustration slash favicons dot html (a dragonfly, a tick, a bubble, and a gladiola)

    Reply
  21. 21
    Ulli
    June 21st, 2007 9:30 pm

    Nice to see what is possible with a few pixels!

    Ulli

    Reply
  22. 22
    NIck
    July 3rd, 2007 2:56 pm

    Nice, 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.

    Reply
  23. 23
    Teen Nude
    July 17th, 2007 10:31 am

    Really good site!
    thanks for the lists!

    Reply
  24. 24
    Danny D
    August 27th, 2007 10:26 am

    Thanks a lot, very interesting article , lots of leads.
    I have bookmarked this site for future reading..Very good site.

    Reply
  25. 25
    Rosli
    September 5th, 2007 10:25 am

    Great site and I like the sharing. A lot of infos and I have generate a favicon for my site with my own picture =)

    Reply
  26. 26
    Prasanth
    September 13th, 2007 5:42 am

    Trendwatching favicon is something that I admire. Though it looks very much like RSS icon, its pretty good.

    Reply
  27. 27
    اغاني
    September 15th, 2007 12:13 pm

    I Really like these sweet icons
    plz don’t forget to add some hearts:)

    Reply
  28. 28
    結婚相
    September 20th, 2007 2:45 pm

    Good article. Fun too. However, you may want to point out WHY hacks are stupid and direct n00bs to some good sources for using CSS layouts without hacks.

    Reply
  29. 29
    LGR
    October 10th, 2007 5:27 am

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

    Reply
  30. 30
    knauf
    October 25th, 2007 1:46 am

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

    Reply
  31. 31
    CafeTime
    November 20th, 2007 7:27 am

    I have old favicon but good. You inspired me. THX

    Reply
  32. 32
    maximum
    November 29th, 2007 5:14 am

    Further Favicons is good!

    Reply
  33. 33
    dannydowney
    January 6th, 2008 11:29 pm

    This site never ceases to amaze me…great post. I will check out that tool.
    Have another Great Year of Being a Smashing Magazine!

    Reply
  34. 34
    Ms. Techie
    January 10th, 2008 3:44 am

    Way 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…

    Reply
  35. 35
    Psy
    January 21st, 2008 1:17 pm

    Thanks for sharing!
    Some icons are really really good. Nice little works!

    Reply
  36. 36
    Umar Farooq
    January 23rd, 2008 10:26 am

    Great Share!
    Awesome stuff!!
    Cheers!

    Reply
  37. 37
    WDG
    January 28th, 2008 8:10 am

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

    Reply
  38. 38
    James
    March 21st, 2008 3:00 am

    Great 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

    Reply
  39. 39
    Marcis Gasuns
    March 22nd, 2008 12:16 pm

    Some are inspiring, the round ones are the best.

    Reply
  40. 40
    Evo08
    March 23rd, 2008 2:56 pm

    Really needed this , thanx .

    Reply
  41. 41
    Alex
    May 21st, 2008 1:14 pm

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

    Reply
  42. 42
    Jason King
    June 22nd, 2008 6:23 pm

    That’s a good list of icons. Lots of primary colours and clean edges. Definitely inspiring stuff.

    Reply
  43. 43
    Susanne
    June 25th, 2008 8:11 am

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

    Reply
  44. 44
    Helen Skiles
    August 5th, 2008 10:33 am

    I was told, somewhere in the “head” section…….

    Please Susanne, lets not talk naughty here.
    There may be children visiting my dear.

    Reply
  45. 45
    Dovid de Bresser
    September 5th, 2008 3:51 am

    There 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/

    Reply
  46. 46
    Khaos
    November 22nd, 2008 6:45 pm

    Hola, Gracias por los favicon, necesistaba inspiración para crear el mío.
    Saludos!!

    Reply
  47. 47
    yulia
    January 20th, 2009 11:18 pm

    thanks for sharing

    Reply
  48. 48
    Claire
    February 16th, 2009 1:58 am

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

    Reply
  49. 49
    Hakki
    February 27th, 2009 10:39 am

    Very nice post, its quite remarkable how effective some of these favicons are given the tiny real estate.

    Reply
  50. 50
    My Medical Note
    April 23rd, 2009 1:02 am

    The 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

    Reply
  51. 51
    masjaliteng
    April 25th, 2009 8:13 am

    thank you for this great info…

    Reply
  52. 52
    kak
    April 26th, 2009 7:22 pm

    great post. thank you

    Reply
  53. 53
    YoungGold
    May 12th, 2009 12:03 pm

    also 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

    Reply
  54. 54
    campuscodi
    May 28th, 2009 3:00 am

    actually 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

    Reply
  55. 55
    Armig Esfahani
    June 27th, 2009 10:24 pm

    I like the ornaments the most i think Matt Webb did great job..
    thank you for the post.. so useful specially the tools..

    Reply
  56. 56
    noterc
    September 30th, 2009 11:29 pm

    Thank you so much, i will get to work on my own favicon now.

    Reply
  57. 57
    bruceslogos
    October 12th, 2009 10:10 pm

    Thank you for sharing this collection of remarkable favicons

    Reply
  58. 58
    Jake
    January 29th, 2010 8:16 pm

    Have 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

    Reply
  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


Advertisement