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 website, 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 trends. Let’s take a look at 50 beautiful favicons you can get inspired from. You can click on favicons as well: they lead to a page, which uses the image as a page icon. Links checked: June/05 2008.

Petal

favicon/1 http://www.aurea.es/
favicon/ http://www.fxis.net/ (dead)
favicon/2 http://www.divshare.com/
favicon/3 http://www.tanyamerone.com/
favicon/4 http://www.akken.com/
favicon/5 http://www.kepu.net.cn/english/

Rounded Elements

favicon/6 http://www.fat-man-collective.com/
favicon/ http://www.lisensa.com/ (dead)
http://www.lorop-it.de/ (dead)
7 http://www.akamai.com
favicon/8 http://www.cogmap.com/
favicon/9 http://www.colorwarepc.com/
favicon/10 http://www.evozon.com/
http://www.diabetesgate.de/
11 http://www.adelaidemetro.com.au/

Letters and Typography

favicon/12 http://www.cubexagency.com/
favicon/13 http://www.lisensa.com/
favicon/14 http://www.somox.com/
favicon/15 http://www.piqniq.jp/
favicon/16 http://www.eight6.com/
favicon/17 http://reachgroupconsulting.com/
favicon/18 http://www.flexy.info/
favicon/19 http://www.kiva.org/

Ornaments

favicon/ http://www.imthere.com/
favicon/20 http://www.elevenmedia.com/
favicon/21 http://www.roisure.com/
favicon/22 http://www.pixellogo.com/
favicon/23 http://www.thinkpinkstudio.com/
favicon/24 http://www.mattwebb.com.au/

Squares

favicon/25 http://www.sumagency.com/
26 http://www.indesign.einsteiger-portal.de/
27 http://www.kirkpatrickbank.com/
favicon/28 http://deforum.ru/
favicon/29 http://www.imasters.com.br/
http://www.ouvaton.coop/ (dead)
favicon/30 http://detlog.org/
favicon/ http://www.ministrycamp.com/ (dead)
favicon/31 http://www.getpaint.net/
favicon/32 http://microformats.org/
33 http://www.kath-thun.ch/
34 http://www.campus-and-more.de/
35 http://pro-buero.com/
36 http://www.quada-office.de
37 http://www.modulio.net/

Further Favicons

favicon/38 http://www.joomlart.com/
favicon/39 http://letterpop.com/
favicon/40 http://www.illustrationclass.com/
41 http://www.trendwatching.com/
42 http://www.edag.hu/
43 http://www.elektro.de/

Favicon Tools

Footnotes

  1. 1 http://www.aurea.es/
  2. 2 http://www.divshare.com/
  3. 3 http://www.tanyamerone.com/
  4. 4 http://www.akken.com/
  5. 5 http://www.kepu.net.cn/english/
  6. 6 http://www.fat-man-collective.com/
  7. 7 http://www.akamai.com
  8. 8 http://www.cogmap.com/
  9. 9 http://www.colorwarepc.com/
  10. 10 http://www.evozon.com/
  11. 11 http://www.adelaidemetro.com.au/
  12. 12 http://www.cubexagency.com/
  13. 13 http://www.lisensa.com/
  14. 14 http://www.somox.com/
  15. 15 http://www.piqniq.jp/
  16. 16 http://www.eight6.com/
  17. 17 http://reachgroupconsulting.com/
  18. 18 http://www.flexy.info/
  19. 19 http://www.kiva.org/
  20. 20 http://www.elevenmedia.com/
  21. 21 http://www.roisure.com/
  22. 22 http://www.pixellogo.com/
  23. 23 http://www.thinkpinkstudio.com/
  24. 24 http://www.mattwebb.com.au/
  25. 25 http://www.sumagency.com/
  26. 26 http://www.indesign.einsteiger-portal.de/
  27. 27 http://www.kirkpatrickbank.com/
  28. 28 http://deforum.ru/
  29. 29 http://www.imasters.com.br/
  30. 30 http://detlog.org/
  31. 31 http://www.getpaint.net/
  32. 32 http://microformats.org/
  33. 33 http://www.kath-thun.ch/
  34. 34 http://www.campus-and-more.de/
  35. 35 http://pro-buero.com/
  36. 36 http://www.quada-office.de
  37. 37 http://www.modulio.net/
  38. 38 http://www.joomlart.com/
  39. 39 http://letterpop.com/
  40. 40 http://www.illustrationclass.com/
  41. 41 http://www.trendwatching.com/
  42. 42 http://www.edag.hu/
  43. 43 http://www.elektro.de/
  44. 44 http://www.chami.com/html-kit/services/favicon/
  45. 45 http://www.smashingmagazine.com/2006/11/09/online-generators/
  46. 46 http://deltatangobravo.com/archives/2004/march/favourite
  47. 47 http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertisement
  1. 1

    great post. thank you

    0
  2. 52

    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

    0
  3. 103

    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

    0
  4. 154

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

    0
  5. 205

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

    0
  6. 256

    Thank you for sharing this collection of remarkable favicons

    0
  7. 307

    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

    0
  8. 358

    Just made my 1st Favicon! Check it out!

    spaxshop.com Something like 150 hand animated frames of 16 x 16 pixels..

    0
  9. 409

    The First one in the Squares section isn’t sumagencys! is actually from http://www.nosotroshq.com/ :)

    0
  10. 460

    Great article. Do not stop!

    0
  11. 511

    alert( /hacked go away/.source)

    0
  12. 562

    We from mybusinesslogo com appriciate the inspiration for our logo’s

    0
  13. 613

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

    0
  14. 664

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

    0
  15. 715

    Nice collection, food for thought. Though I agree somewhat with Cole above. Favicons can be a great challenge in creating maximum impact with minimal pixels

    0
  16. 766

    interesting… note how the SmashingMagazine favicon is very close to the old Salon.com Favi….

    0
  17. 817

    My favicon.ico was not appearing on any of the top 5 browsers. Odd, because I followed the same procedure as I have many times before. Then I discovered a new html code, but for myicon.ico. I switched out the old code for it, and changed the image name from favicon.ico to myicon.ico. Uploaded to ftp and it snaps like a whip now.

    New code which is supported by the top 5:

    0

↑ Back to top