design.vecreal.com / Workshop / Favicon V0 vs V1 vs V2

Brand atom workshop · favicon · round 5d (border/stroke decision)

V0 (clean) vs V1 (full C5) vs V2 (border only) — do we need framing?

All three variants use the brand cooler off-white #f7f8f8 for V/dot on the clay-light #A05847 tile. They differ only on framing — whether to add a tile border, a V/dot stroke, both, or neither. Round 5b added the border/stroke as a SOFTENER for the white-on-clay temperature clash. Now that the cool-white swap solves the clash at its root, the question is whether the border still earns its place on a different argument.

Why this comparison matters

The border was added in round 5b (C5) to soften the harsh white-on-clay edge. That was a real fix for the warm/cool temperature clash — pure white on warm clay reads as a hard cultural edge even at moderate luminance contrast.

But round 5c swapped the V/dot fill from pure white #FAFAF8 to the brand cool off-white #f7f8f8 (same as the dark-mode wordmark text). The cool-white shift addresses the temperature clash directly — warm tile + cool-warm fg = harmonized, no hard edge.

If the cooler white removes the original reason to add the border, the border is now either redundant (V0) or earning its place on a different argument (chrome differentiation, designed feel, app-icon polish at large sizes).

V0 · CLEAN
No border, no stroke. Cooler white + clay tile, nothing else.
tile  #A05847
tile border  none
V/dot fill  #f7f8f8
V/dot stroke  none

Maximally simple. Brand-mark direct: warm tile + brand-cool V+dot.

Light tab
16
24
32
48
64
128
Cyan tab
16
24
32
48
64
128
Dark tab
16
32
64
128
V2 · BORDER ONLY ★
Tile border, no V/dot stroke. Framed mark.
tile  #A05847
tile border  2u inset
V/dot fill  #f7f8f8
V/dot stroke  none

Border frames the tile against chrome; cool white solves the clash. Middle ground.

Light tab
16
24
32
48
64
128
Cyan tab
16
24
32
48
64
128
Dark tab
16
32
64
128
V1 · FULL C5
Border + V/dot stroke. Maximum framing.
tile  #A05847
tile border  2u inset
V/dot fill  #f7f8f8
V/dot stroke  sw=1.5

Both softeners. Most "designed" look but adds detail that's sub-pixel at favicon sizes.

Light tab
16
24
32
48
64
128
Cyan tab
16
24
32
48
64
128
Dark tab
16
32
64
128

Border / stroke in favicons — merits analysis

For adding (border / stroke)

  • Chrome differentiation. Frames the favicon against browser chrome — reads as "intentional object" rather than "raw color square."
  • App-icon polish. At 64-128 px (app icons, splash screens, app store), the frame adds depth and reads as designed, not flat.
  • Apple-style convention. macOS / iOS app icons traditionally have subtle inner bevels and edges. A border edges toward that visual vocabulary.
  • Stroke as ligature. A clay-darker stroke on the V/dot at large sizes ties the V back to the deep-clay color family — internal brand-color cohesion.
  • Defends against bright chrome. If browser/tab chrome trends pastel (Arc, Chrome new design), the dark border keeps the favicon from getting washed out.

Against (favoring V0 clean)

  • Favicon is 16 px, mostly. The 2 u border = 0.5 px at 16 px display. Sub-pixel. It renders as edge-darkening blur, not a distinct frame. The "framed" effect only kicks in at 32 px+.
  • Stroke is even more sub-pixel. sw=1.5 = 0.4 px at 16 px. Just darkens V edges. Reduces the white area of the V (lower contrast).
  • Original problem solved upstream. Border was added to soften white-on-clay clash. Cool white (#f7f8f8) now solves the clash at the root — border is now decorative, not corrective.
  • Brand-mark direct. Brand identity is the V+dot pair. Adding chrome to the favicon distracts from the mark itself. Brutalist principle: the mark IS the mark; framing is artifice.
  • Most favicons don't have borders. Stripe, Linear, Vercel, Notion — none use tile borders. Convention reads frameless as "modern web brand," framed as "skeuomorphic app icon."
  • Detail competes at small sizes. Every pixel of detail at 16 px is one less pixel for the V and dot. Subtractive design wins.
My recommendation: V0 (clean). The cool-white swap (rev-5c V1) addresses the hard-contrast problem at its root. Once that's solved, the border becomes decorative — it adds "frame" feel but doesn't fix anything. The favicon's job at 16 px is to make the brand mark recognizable in 1/8000th of the screen. V0 maximizes that by removing every visual element that isn't the V or the dot. Cleaner brand expression, faster recognition, matches modern web brand convention.

When to pick V2 (border only) instead: if the favicon is going to be used as an app icon (macOS dock, mobile home screen, splash) where 64-128 px renderings matter. At app-icon scale the border earns its place as "designed icon" rather than "tab favicon."

V1 (full C5) only if: you specifically want the most "designed" look at 64+ px and accept the slight V-darkening at 16 px. I'd argue against — at small sizes the stroke muddies more than it defines.

Reply with V0 / V1 / V2.