Vecreal — Dark Mode Favicon Exploration

Context

How dark-mode favicons work

The browser mechanism

Modern browsers (Chrome 95+, Safari 16+, Firefox 105+) honor a media attribute on favicon links:

OS-level dark mode switches the tab bar to a dark gray (~#2A2D31 on macOS, ~#202124 on Chrome on Windows). The current clay tile (#A05847) is visible against both light and dark tab bars — it's warm enough to read on either. But a dark-mode-specific variant could feel more native to the OS theme.

The visibility trap

A dark-mode favicon must NOT match the tab bar color too closely — that makes the favicon invisible. Tab bars are typically ~#2A2D31 (macOS) or ~#202124 (Chrome). Vecreal's dark surface is #131517 (much darker) — a dark tile at #131517 IS visible against a #2A2D31 tab bar, but the contrast is subtle. Stronger contrast options: clay tile, soft-white tile, or outlined (no fill, clay stroke).

01 · Light variant (locked, reference)

L · Universal contained — clay tile

L · LOCKED LIGHT/UNIVERSAL

Clay tile + soft-white V+dot — works against any tab-bar color

tile #A05847 V + dot #FAFAF8 rx 10

L @sizes

16 · favicon

02 · Dark-mode candidates

Four candidates for the dark-mode favicon

Same V geometry and dot position as the locked D-half. Only the color treatment changes. Each shown in tab-bar simulators below to preview against both light- and dark-mode browser chrome.

DA · DARK TILE + CLAY (most brand-coded)

#131517 tile + #C68070 V+dot — Vecreal's actual page surface

tile #131517 V + dot #C68070 rx 10

DA @sizes

16 · favicon

DB · DARK TILE + SOFT-WHITE

#131517 tile + #FAFAF8 V+dot — high contrast, terminal-ish

tile #131517 V + dot #FAFAF8 rx 10

DB @sizes

16 · favicon

DC · DARK TILE WITH CLAY BORDER + CLAY V+dot

Clay-bordered dark tile — adds a clay ring for separation from tab bar

tile #131517 stroke #C68070 V + dot #C68070 rx 10

DC @sizes

16 · favicon

DD · SOFT-WHITE TILE + CLAY V+dot

#FAFAF8 tile + #C68070 V+dot — inverted from light; bright stamp on dark tab bar

tile #FAFAF8 V + dot #C68070 rx 10

DD @sizes

16 · favicon

03 · In context — tab-bar simulators

All five favicons in light and dark tab bars

Light tab bar simulates macOS / Chrome light mode (~#e8e8eb). Dark tab bar simulates dark mode (~#2a2d31). The active tab in each strip is highlighted. Notice how each variant reads against the bar color around it.

Vecreal — L

Vecreal — DA

Vecreal — DB

Vecreal — DC

Vecreal — DD

↑ Light browser theme · macOS / Chrome light

Vecreal — L

Vecreal — DA

Vecreal — DB

Vecreal — DC

Vecreal — DD

↑ Dark browser theme · macOS / Chrome dark

04 · PC recommendation

My read

Honest take: the locked light variant (L — clay tile) already works in both light AND dark tab bars. The warm clay reads well against both light gray (#e8e8eb) and dark gray (#2a2d31) — see Section 3. You may not need a separate dark-mode favicon at all.

That said, if you want a dedicated dark-mode variant to feel more native to OS dark theme, DA (dark tile + clay V+dot) is the strongest candidate. Reasons:

Uses Vecreal's actual page surface color (#131517) — same as the dark.vecreal.com would be. Perfect brand alignment.
Clay V+dot inverts cleanly from the locked light variant's "clay outside, white inside" → "dark outside, clay inside."
Visible against dark tab bars (the tile is darker than the tab bar, creating contrast).
Reads as "Vecreal's dark surface, stamped" — feels native.

DB (dark tile + soft-white) is the most accessible (highest contrast) but loses brand color — reads as a generic dark-app icon. DC (clay border) adds a decorative element that breaks the contained-variant convention. DD (white tile) reads loud — bright white against dark tab bar is attention-grabbing but breaks the calibrated/restrained voice.

My recommendation: Lock L as the default (universal). Add DA as the dedicated dark-mode variant via media="(prefers-color-scheme: dark)". Both ship; browser picks based on user's OS theme.

Reply format to close the amendment: Dark favicon: NONE | DA | DB | DC | DD
→ "NONE" means keep only the locked L (universal). Any of DA-DD means add the chosen variant as a dark-mode override. PC then executes the full atomic propagation across all sources of truth and ships the brand-atom amendment.