Skip to content

feat: replace non-square black W favicon with the brand W tile#238

Merged
fotyG merged 1 commit into
mainfrom
feat/plg-46-favicon-w-tile
Jul 10, 2026
Merged

feat: replace non-square black W favicon with the brand W tile#238
fotyG merged 1 commit into
mainfrom
feat/plg-46-favicon-w-tile

Conversation

@fotyG

@fotyG fotyG commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Closes the website half of the favicon work: wopee-io-plg/plg#46 (sub-issue of wopee-io-plg/plg#41). Pairs with autonomous-testing/cmd#1159, which ships the identical icon in commander.

Why

static/img/favicon.png was the bare black W silhouette at 160x162. Two defects:

  1. A black glyph is close to invisible on a dark browser tab strip.
  2. Google's favicon guidelines want a square icon whose size is a multiple of 48px. A 160x162 non-square PNG does not qualify, so the SERP favicon can be dropped — which matters for a marketing site.

What

static/img/favicon.svg new — purple #7030a0 tile, gold #ffcc00 W
static/img/favicon.png 160x162 black W → 48x48 square tile
static/img/apple-touch-icon.png new — 180x180
docusaurus.config.js headTags for the SVG + apple-touch links

Docusaurus emits exactly one <link> for its favicon field, so the other two go in top-level headTags. Those hrefs are emitted verbatim — unlike favicon, they are not baseUrl-prefixed — so baseUrl is now a const that both the config field and the hrefs interpolate. Without that, the icons would 404 the day baseUrl stops being /.

The glyph was traced, not redrawn

static/img/logo.png is an alpha-only silhouette (every opaque pixel is #000000). favicon.svg is that alpha channel traced via marching-squares + Ramer-Douglas-Peucker, measured at 99.66% IoU against the source — under one pixel of error at 16x16.

Verification

Ran a real npm run build and inspected build/index.html:

<link data-rh="true" rel="icon" href="/img/favicon.png">
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">

All three assets emit into build/img/. tsc reports only the pre-existing Head cannot be used as a JSX component errors in src/theme/*, which this branch does not touch. The repo has no prettier config and docusaurus.config.js was already prettier-dirty on main, so I matched the file's existing style rather than reformatting it.

🤖 Generated with Claude Code

The favicon was the bare black W silhouette at 160x162. It is close to
invisible on a dark browser tab strip, and Google's favicon guidelines
want a square icon sized to a multiple of 48px, which a 160x162 PNG is
not -- so the SERP favicon can be dropped.

Use the same purple (#7030a0) tile with the gold (#ffcc00) W as
commander, and regenerate the PNG square at 48x48. The colours are
fixed, so the icon renders identically in light and dark themes.

Docusaurus emits only one link for the `favicon` field, so the SVG and
the apple-touch-icon go in top-level `headTags`. Those hrefs are emitted
verbatim rather than baseUrl-prefixed, hence the extracted `baseUrl`
const.

Refs wopee-io-plg/plg#46

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@fotyG fotyG merged commit c9018e5 into main Jul 10, 2026
1 check passed
@fotyG fotyG deleted the feat/plg-46-favicon-w-tile branch July 10, 2026 12:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant