feat(frontend): add an RD monogram app icon #70

2026-08-20T09:01:21-05:00

bermudalamb commented

2026-08-20 09:01:21 -05:00

The app had no favicon at all, so every tab showed the browser's default globe. Adds an RD monogram as frontend/public/favicon.svg plus a 180x180 apple-touch-icon.png, and links both from index.html.

The mark is the letters knocked out of a filled tile rather than drawn on their own. At 16px — which is the only size that really decides a favicon — a solid shape with a bright interior stays findable in a strip of twenty tabs, where bare strokes turn to grey fuzz. Every candidate was rendered at 16, 32, 64 and 128 in headless Chromium and looked at rather than trusted from the path data, which is what caught the two drafts that did not survive: one had the D's bowl extending past the viewBox and clipping flat, because a stroked arc reaches half the stroke width beyond its centreline; another shared a stem between a mirrored R and the D and read as a Cyrillic Я.

Colours are the accent already defined in src/main.tsx, and the SVG inverts with the theme for the same reason that accent does. Chrome ignores media queries inside a favicon and keeps the light rendering; that is acceptable here rather than worked around, because the pale letters still carry the mark against a dark tab strip. The Apple icon is full-bleed with no inner corner radius, since iOS applies its own mask and would otherwise show a small rounded tile floating inside a larger rounded tile.

Also sets theme-color for both schemes so the browser chrome on Android and in an installed PWA matches the app rather than fighting it.

Verified: build clean, lint clean, and both files land in dist/, which the Dockerfile copies wholesale into the image's public directory.

The app had no favicon at all, so every tab showed the browser's default globe. Adds an RD monogram as frontend/public/favicon.svg plus a 180x180 apple-touch-icon.png, and links both from index.html. The mark is the letters knocked out of a filled tile rather than drawn on their own. At 16px — which is the only size that really decides a favicon — a solid shape with a bright interior stays findable in a strip of twenty tabs, where bare strokes turn to grey fuzz. Every candidate was rendered at 16, 32, 64 and 128 in headless Chromium and looked at rather than trusted from the path data, which is what caught the two drafts that did not survive: one had the D's bowl extending past the viewBox and clipping flat, because a stroked arc reaches half the stroke width beyond its centreline; another shared a stem between a mirrored R and the D and read as a Cyrillic Я. Colours are the accent already defined in src/main.tsx, and the SVG inverts with the theme for the same reason that accent does. Chrome ignores media queries inside a favicon and keeps the light rendering; that is acceptable here rather than worked around, because the pale letters still carry the mark against a dark tab strip. The Apple icon is full-bleed with no inner corner radius, since iOS applies its own mask and would otherwise show a small rounded tile floating inside a larger rounded tile. Also sets theme-color for both schemes so the browser chrome on Android and in an installed PWA matches the app rather than fighting it. Verified: build clean, lint clean, and both files land in dist/, which the Dockerfile copies wholesale into the image's public directory.

bermudalamb added 1 commit 2026-08-20 09:01:21 -05:00

feat(frontend): add an RD monogram app icon

SonarQube Analysis / sonarqube (pull_request) Successful in 3m50s

Details

Tests / lint (pull_request) Successful in 2m19s

Details

Tests / backend-unit (pull_request) Successful in 2m18s

Details

Tests / frontend-e2e (pull_request) Failing after 9m50s

Details

b677378533

The app had no favicon at all, so every tab showed the browser's default globe. Adds an RD monogram as frontend/public/favicon.svg plus a 180x180 apple-touch-icon.png, and links both from index.html.

The mark is the letters knocked out of a filled tile rather than drawn on their own. At 16px — which is the only size that really decides a favicon — a solid shape with a bright interior stays findable in a strip of twenty tabs, where bare strokes turn to grey fuzz. Every candidate was rendered at 16, 32, 64 and 128 in headless Chromium and looked at rather than trusted from the path data, which is what caught the two drafts that did not survive: one had the D's bowl extending past the viewBox and clipping flat, because a stroked arc reaches half the stroke width beyond its centreline; another shared a stem between a mirrored R and the D and read as a Cyrillic Я.

Colours are the accent already defined in src/main.tsx, and the SVG inverts with the theme for the same reason that accent does. Chrome ignores media queries inside a favicon and keeps the light rendering; that is acceptable here rather than worked around, because the pale letters still carry the mark against a dark tab strip. The Apple icon is full-bleed with no inner corner radius, since iOS applies its own mask and would otherwise show a small rounded tile floating inside a larger rounded tile.

Also sets theme-color for both schemes so the browser chrome on Android and in an installed PWA matches the app rather than fighting it.

Verified: build clean, lint clean, and both files land in dist/, which the Dockerfile copies wholesale into the image's public directory.

bermudalamb merged commit 0e7fc83ea9 into main

2026-08-20 09:01:28 -05:00

bermudalamb deleted branch feature/app-icon

2026-08-20 09:01:28 -05:00

bermudalamb referenced this pull request

2026-08-20 11:01:30 -05:00

Show the RD monogram beside the wordmark in the storefront header #76

bermudalamb referenced this pull request

2026-08-20 11:01:54 -05:00

Documented branch convention still permits branches with no issue behind them #77