(Quick preface: this is not about the design technique, which is fine, but rather using icons like this on the web, or as favicons.)
I'm going to buck the trend here and just say: designing 16x16 icons for software should be dead (except as hobby/art, like for pixellated-style video games, etc.).
When the future is going towards retina displays, fluidly zoomable interfaces, and whatnot, this is a huge step backwards.
If you have an interface with 16x16 icons that are necessary to understand, then they should be dead simple -- arrows, circles, stars and whatnot. Not monstrosities like the GitHub icons [1] where they try to pack icons on top of icons in a tiny space. Icons next to text should have no more complexity than the letterforms themselves -- the letterforms have been chosen to be a legible size that doesn't strain your eyes, and icons should never go beyond that. And they should be icon fonts/etc, so they look good on retina/zoomed.
On the other hand, there are 16x16 icons that serve purely as illustrations -- application and document-type icons, for example, or list view in the OSX Finder. In this case, it's pointless to aim for clear distinctions, because there just isn't enough space, and it's too small anyways. A scaled-down version of the normal icon is fine, even if it's a little blurry or whatever. Just seeing a vaguely familiar orange and blue ball next to the text "Firefox" is fine -- nobody ever uses (or should use) 16x16 icons of this nature without a label next to them. Plus, again, with retina/web zooming, all the work to design a "special" 16x16 icon is for naught.
The Hacker News favicon is a great example of a good icon design -- easily recognizable, scalable, not too busy, no special treatment needed.
The frog in this example, with all the other icons at the end, is exactly the kind of thing that should never be used as a favicon, or anywhere on the web, really. They look fine when enlarged (like the Nintendo, with its tiny resolution blown up on a TV), but are terrible on modern screens. The favicon of the page itself, while apparently a bird, looks just as much like a school bus driving into a lake, or a piece of abstract art, when I see it in my browser tab.
I think you might be confusing beauty with design.
The HN favicon is not beautiful at all. It's not "good-looking". But when I look at 20 tabs open, you can instantly tell at a glance which ones are Hacker News -- or in a list of bookmarks. That's good design. It's working.
A bad favicon, on the other hand, is reddit's [1], for example. It tries to cram the whole reddit "head" into a 16x16 space, with a small white head against a light blue background (too little contrast, especially against a light-gray tab), with thin black lines. Glancing at it in a list of tabs or bookmarks, it doesn't stand out at all (due to bad "background-y" color choices), and isn't easily recognizable at all (too much detail, no obvious clear central element).
In my experience the Hacker News icon is one that gets confused with icons on my tab bar. Colored squares are only easily recognizable if they have a unique color, which obviously won't happen with the billions of sites out there.
HN favicon has no design. It is not beautiful and it lacks even the 32x32 version. The whole site still uses FONT elements in its code. What do you expect?
There were zillions of redesigns proposals. None of them satisfied me at all. They were clunky, dense and too gloomy on most cases, but hell, even with that proposals I think this site needs love. Lots of love.
I'm going to buck the trend here and just say: designing 16x16 icons for software should be dead (except as hobby/art, like for pixellated-style video games, etc.).
When the future is going towards retina displays, fluidly zoomable interfaces, and whatnot, this is a huge step backwards.
If you have an interface with 16x16 icons that are necessary to understand, then they should be dead simple -- arrows, circles, stars and whatnot. Not monstrosities like the GitHub icons [1] where they try to pack icons on top of icons in a tiny space. Icons next to text should have no more complexity than the letterforms themselves -- the letterforms have been chosen to be a legible size that doesn't strain your eyes, and icons should never go beyond that. And they should be icon fonts/etc, so they look good on retina/zoomed.
On the other hand, there are 16x16 icons that serve purely as illustrations -- application and document-type icons, for example, or list view in the OSX Finder. In this case, it's pointless to aim for clear distinctions, because there just isn't enough space, and it's too small anyways. A scaled-down version of the normal icon is fine, even if it's a little blurry or whatever. Just seeing a vaguely familiar orange and blue ball next to the text "Firefox" is fine -- nobody ever uses (or should use) 16x16 icons of this nature without a label next to them. Plus, again, with retina/web zooming, all the work to design a "special" 16x16 icon is for naught.
The Hacker News favicon is a great example of a good icon design -- easily recognizable, scalable, not too busy, no special treatment needed.
The frog in this example, with all the other icons at the end, is exactly the kind of thing that should never be used as a favicon, or anywhere on the web, really. They look fine when enlarged (like the Nintendo, with its tiny resolution blown up on a TV), but are terrible on modern screens. The favicon of the page itself, while apparently a bird, looks just as much like a school bus driving into a lake, or a piece of abstract art, when I see it in my browser tab.
[1] https://github.com/styleguide/css/7.0