The toolbar icon is the only part of Latr on screen when nothing of Latr is open. It is 16 CSS pixels wide. It is also, for most people, the entire visual identity of the product between one reminder and the next.

The artwork is a rounded tile with a gradient running blue into violet, an amber accent, and a near-white clock face sitting in the middle with padding around it.

At 128px that reads as a clock. At 16px the padding is roughly two pixels a side and the clock is a smudge. So the 16px asset was cropped in - same artwork, tighter frame, clock filling more of the tile. More clock, less wasted margin. It is the reasonable thing to do and we did it.

What it actually did

Mean saturation across the 16px asset went from 0.39 to 0.26.

The clock face is near-white. Filling the frame with it means filling the frame with the least saturated part of the image, and the coloured tile - the part carrying the identity - gets pushed to the edges and then partly cropped away. The result on a real toolbar is a pale grey disc.

Which would merely be a shame, except for what grey already means there.

Chrome greys an icon to say “this extension cannot act here”

When an extension has no permission for the current page, Chrome desaturates its toolbar icon. That is a platform convention, it is consistent across every extension, and users learn it without ever being told: a grey icon means this thing is switched off right now.

So an icon that arrives already grey does not read as subtle. It reads as disabled. After launch it was reported as exactly that - a user asking why Latr was inactive on every page they visited. Nothing was inactive. The icon was 0.26 saturated.

The correction

Every size is now the same crop, 16px included.

That means the 16px asset keeps the padding that felt wasteful, and the clock at that size is genuinely not legible as a clock. We decided that was fine, because the two sizes are doing different jobs:

  • At 16px, the coloured tile says “installed and working”. That is the whole message. It needs to be a saturated, recognisable colour block, distinguishable from every other icon in the row and from the greyed-out state.
  • At 32px and up, the clock says “Latr”. There is room for it there - in the extensions menu, on the store listing, in chrome://extensions - and those are the surfaces where someone is actually identifying the product rather than glancing at it.

Optimising the 16px asset for legibility optimised it for a job it does not have.

The part that generalises

A favicon-sized asset is not a small version of a logo. It is a different design problem with a different success condition, and the success condition is usually distinguishable rather than readable. Squint at your icon in a row of eight others; if you cannot pick it out, no amount of detail inside it helps.

And check what the platform already uses your visual channels for. Colour saturation was not a free variable here - Chrome had spoken for it.

Two smaller things from the same pass

The corners are transparent, not white. A toolbar icon with baked-in white corners shows as a white box on a dark theme, and the toolbar is usually where a dark theme is.

The blue-to-violet gradient stays, even though the rest of the product moved to warm paper and a single amber signal, and there is now no other violet anywhere in it. The icon is the identity in the store, on the toolbar, and in every screenshot already published. Re-cutting it is a change to the identity rather than to the palette, and those are not the same decision. The amber accent is what makes it agree with the current palette rather than merely coexist with it.