Transferred from #2033 to handle in-house.

I think there are good arguments to make about how we display our flag. How do we best preserve the legibility of the flag at small sizes? It's impossible to reproduce a fine level of detail at certain levels of scale, and the art of iconography is in capturing the essential and removing everything else.

Success criteria

• Crisp and clean at the favicon size of 16x16 pixels (or 32x32px displayed as 16x16px)
• Use the same image for the official banner that we use for the favicon
• Clearly reads as the United States flag with no magnification

Constraints

• The aspect ratio of the official US flag is essentially 2:1 (actually 1.9:1)
• 7 red bars and 6 white bars, alternating, starting and ending with red
• 50 white stars in a blue rectangle (the union): aspect ratio 1.4:1
• The union height is 7 bars (red to red)

Solutions

Scaling down a standard US flag results in a muddy image without clear distinction between the bars, and complete dissolution of the stars. (FYI, it's hard to display this with pixel fidelity in the following screenshots, and every screen has different display density.)

While this is an "accurate" flag, it doesn't read as accurate. The stars and bars both are reduced to soup. How might we rebuild the flag file to make it read better? Assigning each bar to a single pixel gives a clear distinction between bars, but requires changing the number of bars. Getting closest to the accurate 2:1 ratio results in a flag with 9 bars:

To my eye, this reads as too few bars, and the resulting union is too small to display many stars. Moving to 11 bars results in a flag that's closer to my mental image of the flag:

Additionally, an accurate flag reads as too dark and unsaturated at small size. You could be forgiven for thinking the flags below were reproduced in grayscale, particularly at a glance, and if the brightness on your machine is turned down:

This brighter version reads more clearly as red at small size. (And I should be clear that the changes are explicitly for very small sizes. They don't hold up at even double the size.):

I know that facts matter, and the flag is the flag is the flag, but in a specialized display environment there are compromises, and as a visual designer I'm focussed on the experiential, and most often hew to the "adhere to the spirit of the law rather than the letter of the law" dictum. And in the mind's eye, the flag looks something like this:

Clear red and white bars, a blue squarish rectangle in the upper-left corner from red bar to red bar with some number of distinct stars set in an offset pattern inset from the boundary, all inside a flag that's more rectangular than an old tv, but less rectangular than a new one.

And all this leads me to suggest a small flag very similar to the flag we currently use:

But what I might suggest is that we build a cleaner, sharper version (or versions) and do a better job of controlling its display (by, say, limiting its width in the banner to 16px).

And while I'm being something of an apostate, I may as well say that I'd be open to using a high-contrast black and white version of the flag icon in certain situations. I just want to work to honor the spirit of the flag and present it in the best possible light over multiple display environments.

🇺🇸