design.vecreal.com / Workshop / Favicon review

Brand atom workshop · holistic favicon review

Favicon — 6 refinement options

Operator-reported: the current L-variant favicon feels off — "something about the white on clay." Diagnostic surfaced three issues. This page shows 6 refinement options against the current rendered at 16 / 24 / 32 / 48 / 64 / 128 px (real favicon sizes), with light + dark tab-bar mocks for context. Geometry unchanged across variants (same V path, same composition); color and per-variant overshoot vary.

Three things that may be making it feel "odd"

  1. Color inversion from the wordmark. Wordmark teaches V+dot = clay. Favicon inverts: clay = tile, V+dot = white. The brand-color story runs backwards.
  2. No V optical overshoot. Rev-5 wordmark V has 0.0325em descent for optical grounding. Favicon V tip sits at path apex (y=50) with no overshoot.
  3. Dot vertical position reversed. Wordmark dot sits at the baseline (descended slightly). Favicon dot is at cy=42, V tip at y=50 — dot is ABOVE V tip in the favicon, opposite of the wordmark.
CURRENT · L LOCKED
Clay tile + soft-white V+dot
tile  #A05847 clay-light
V  #FAFAF8 soft-white
dot  #FAFAF8 soft-white
V overshoot  none
dot cy  42 (above V tip)

Universal compatibility on any tab-bar color, but inverts wordmark color story.

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128
F1 · DARK TILE + CLAY V/DOT
Matches v5 landing dark mode — "Vecreal mark in clay on dark"
tile  #131517 dark
V  #C68070 clay-bright
dot  #C68070 clay-bright
V overshoot  none
dot cy  42 (above V tip)

Color story matches wordmark dark mode. Dark tile blends slightly on dark tab bars.

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128
F2 · LIGHT TILE + CLAY V/DOT
Matches wordmark light mode — soft-white tile, clay-light V+dot
tile  #FAFAF8 soft-white
V  #A05847 clay-light
dot  #A05847 clay-light
V overshoot  none
dot cy  42 (above V tip)

Lightest treatment. Color story matches wordmark light mode. Light tile blends on light tab bars.

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128
F3 · CLAY TILE + DARK V/DOT
"Stamp" treatment — Vecreal mark in dark on clay seal
tile  #A05847 clay-light
V  #131517 dark
dot  #131517 dark
V overshoot  none
dot cy  42 (above V tip)

Keeps the clay tile (universal contrast). Dark V+dot reads as official stamp.

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128
F4 · CURRENT + GEOMETRY FIX
Keep current colors; apply V overshoot + drop dot to V-tip baseline
tile  #A05847 clay-light
V  #FAFAF8 soft-white
dot  #FAFAF8 soft-white
V overshoot  +2 SVG units (≈ 0.0325em)
dot cy  50 (= V tip baseline)

Minimal color change; aligns favicon with rev-5 wordmark geometry — dot bookends at V tip baseline.

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128
F5 · DARK + CLAY + GEOMETRY FIX
F1 color story + F4 geometry — fully aligned with rev-5 wordmark
tile  #131517 dark
V  #C68070 clay-bright
dot  #C68070 clay-bright
V overshoot  +2 SVG units
dot cy  50 (= V tip baseline)

Both fixes applied: clay V+dot (matches wordmark), geometry aligned with rev-5 (dot at V baseline).

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128
F6 · LIGHT + CLAY + GEOMETRY FIX
F2 color story + F4 geometry — wordmark light-mode + rev-5 alignment
tile  #FAFAF8 soft-white
V  #A05847 clay-light
dot  #A05847 clay-light
V overshoot  +2 SVG units
dot cy  50 (= V tip baseline)

Lightest reading. Light tile blends on light tab bars.

tab-bar context
Vecreal
Vecreal
16
24
32
48
64
128

Spec deltas at a glance

VARIANT TILE V+DOT V OVERSHOOT DOT cy NOTE
Current · L#A05847 clay#FAFAF8 soft-whitenone42 (above V tip)universal contrast, inverts color story
F1#131517 dark#C68070 claynone42matches wordmark dark mode
F2#FAFAF8 light#A05847 claynone42matches wordmark light mode
F3#A05847 clay#131517 darknone42stamp / seal feel
F4#A05847 clay#FAFAF8 soft-white+2 SVG units50 (V tip)current colors, geometry aligned with rev-5
F5#131517 dark#C68070 clay+2 SVG units50 (V tip)both fixes — fully wordmark-aligned
F6#FAFAF8 light#A05847 clay+2 SVG units50 (V tip)light mode + geometry fix
Reply with your pick — "Current", "F1" through "F6", or a different combination (e.g., "F1's colors with F4's geometry"). If picked, propagates to: favicon SVG data URI in all consumers (vecreal.com, design.vecreal.com, brand-atoms HTMLs, OG preview, LinkedIn square), plus reference-design-system.html monogram specs, plus CHANGELOG. Tab-bar / favicon usage becomes the new universal default.