css

ons 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