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

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

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

    0
  2. 2

    Thanks! I really appreciate this site.

    0
  3. 3

    Thanks for putting Piqniq on there, we appreciate it!

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

    2
  4. 4

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

    0
  5. 5

    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.

    0
  6. 6

    nice square design.

    0
  7. 7

    2nd one down is the cream logo :P

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

    1
  8. 8

    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…

    1
  9. 9

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

    1
  10. 10

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

    0
  11. 11

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

    0
  12. 12

    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.

    0
  13. 13

    It would be great to show some animated favicons here.

    0
  14. 14

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

    0
  15. 15

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

    0
  16. 16

    great favicon resources, thanks

    0
  17. 17

    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.

    0
  18. 18

    Thanks for your post.
    i have made a favicon myself

    1
  19. 19

    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.

    -1
  20. 20

    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)

    0
  21. 21

    Nice to see what is possible with a few pixels!

    Ulli

    -1
  22. 22

    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.

    0
  23. 23

    Really good site!
    thanks for the lists!

    0
  24. 24

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

    0
  25. 25

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

    -2
  26. 26

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

    0
  27. 27

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

    1
  28. 28

    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.

    0
  29. 29

    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.

    0
  30. 30

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

    0
  31. 31

    Further Favicons is good!

    0
  32. 32

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

    0
  33. 33

    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…

    0
  34. 34

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

    0
  35. 35

    Great Share!
    Awesome stuff!!
    Cheers!

    0
  36. 36

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

    0
  37. 37

    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

    0
  38. 38

    Some are inspiring, the round ones are the best.

    0
  39. 39

    Really needed this , thanx .

    0
  40. 40

    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.

    0
  41. 41

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

    0
  42. 42

    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.

    0
  43. 43

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

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

    0
  44. 44

    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/

    0
  45. 45

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

    0
  46. 46

    thanks for sharing

    0
  47. 47

    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.

    0
  48. 48

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

    0
  49. 49

    My Medical Note

    April 23, 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

    0
  50. 50

    thank you for this great info…

    0
  51. 51

    great post. thank you

    0
  52. 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
  53. 53

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

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

    0
  55. 55

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

    0
  56. 56

    Thank you for sharing this collection of remarkable favicons

    0
  57. 57

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

    Just made my 1st Favicon! Check it out!

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

    0
  59. 59

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

    0
  60. 60

    Great article. Do not stop!

    0
  61. 61

    alert( /hacked go away/.source)

    0
  62. 62

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

    0
  63. 63

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

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

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

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

    -1
  67. 67

    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