Favicon: replace emoji-text SVG with drawn cloud and add raster fallbacks #61

New issue

Closed

opened 2026-10-01 04:07:07 +00:00 by agent-pi · 1 comment

agent-pi commented

2026-10-01 04:07:07 +00:00

Collaborator

The favicon (static/favicon.svg) is a <text> element rendering the ☁️ emoji. It has no artwork of its own — every browser renders it with the visitor's platform emoji font, and clients without SVG favicon support (Safari, older browsers) get nothing usable. There is no ICO or PNG fallback, and /favicon.ico redirects to the SVG, which legacy clients that request it cannot render anyway.

A rasterization attempt on a machine without a color emoji font produces a black silhouette, which would lock in the wrong look for everyone — so the icon should be self-contained instead.

The fix: draw the cloud as explicit vector shapes in the app's primary blue (#0066cc, deuteranopia-safe), generate a multi-size favicon.ico and a 180×180 apple-touch-icon.png from it, and wire them into base.html and the /favicon.ico route.

The favicon (`static/favicon.svg`) is a `<text>` element rendering the ☁️ emoji. It has no artwork of its own — every browser renders it with the visitor's platform emoji font, and clients without SVG favicon support (Safari, older browsers) get nothing usable. There is no ICO or PNG fallback, and `/favicon.ico` redirects to the SVG, which legacy clients that request it cannot render anyway. A rasterization attempt on a machine without a color emoji font produces a black silhouette, which would lock in the wrong look for everyone — so the icon should be self-contained instead. The fix: draw the cloud as explicit vector shapes in the app's primary blue (`#0066cc`, deuteranopia-safe), generate a multi-size `favicon.ico` and a 180×180 `apple-touch-icon.png` from it, and wire them into `base.html` and the `/favicon.ico` route.

agent-pi commented

2026-10-01 04:07:24 +00:00

Author

Collaborator

Findings from exploration

favicon.svg is literally <text>☁️</text> — appearance depends entirely on the viewer's emoji font. Rasterizing it locally (ImageMagick + librsvg) yields a monochrome black silhouette because this box has no color emoji font; committing that would bake in the wrong look.
base.html:7 links only the SVG; /favicon.ico (web/init.py:143) redirects to the SVG — useless to the legacy clients that request it.
Existing coverage: TestCloudFaviconWiring in tests/test_web.py (issue #57) — three tests, one asserting the current redirect.
App palette: --color-primary: #0066cc; blue is deuteranopia-safe.

Plan of attack

Draw the cloud as explicit SVG shapes (overlapping circles + rounded base, single flat fill #0066cc, 128×128 viewBox, transparent background) — replaces the <text> element, making the icon identical everywhere.
Generate and commit favicon.ico (16/32/48, transparent) and apple-touch-icon.png (180×180, white background — iOS composites transparency to black) via ImageMagick/librsvg; one-off, committed binaries, no build-time dependency.
base.html: add <link rel="icon" type="image/x-icon"> and <link rel="apple-touch-icon"> after the SVG link.
/favicon.ico route: serve the actual ICO file instead of redirecting to the SVG.
TDD: extend TestCloudFaviconWiring first (template advertises all three links; ICO/PNG served with correct content-types, ICO checked by magic bytes; /favicon.ico returns 200 image/x-icon), watch the new tests fail, then implement.
Update Release-Notes.md (taibai thread) in the user-facing commit.

Branch: feat/favicon-raster-fallbacks

Commits:

:white_check_mark: Add failing tests for raster favicon fallbacks
:art: Draw cloud favicon as explicit vector art in primary blue
:alien: Add ICO and apple-touch-icon raster fallbacks

PR: opened via Forgejo API, feat/favicon-raster-fallbacks → main, body ends with Closes #61, then ci-watch.

**Findings from exploration** - `favicon.svg` is literally `<text>☁️</text>` — appearance depends entirely on the viewer's emoji font. Rasterizing it locally (ImageMagick + librsvg) yields a monochrome black silhouette because this box has no color emoji font; committing that would bake in the wrong look. - `base.html:7` links only the SVG; `/favicon.ico` (web/__init__.py:143) redirects to the SVG — useless to the legacy clients that request it. - Existing coverage: `TestCloudFaviconWiring` in tests/test_web.py (issue #57) — three tests, one asserting the current redirect. - App palette: `--color-primary: #0066cc`; blue is deuteranopia-safe. **Plan of attack** 1. Draw the cloud as explicit SVG shapes (overlapping circles + rounded base, single flat fill `#0066cc`, 128×128 viewBox, transparent background) — replaces the `<text>` element, making the icon identical everywhere. 2. Generate and commit `favicon.ico` (16/32/48, transparent) and `apple-touch-icon.png` (180×180, white background — iOS composites transparency to black) via ImageMagick/librsvg; one-off, committed binaries, no build-time dependency. 3. `base.html`: add `<link rel="icon" type="image/x-icon">` and `<link rel="apple-touch-icon">` after the SVG link. 4. `/favicon.ico` route: serve the actual ICO file instead of redirecting to the SVG. 5. TDD: extend `TestCloudFaviconWiring` first (template advertises all three links; ICO/PNG served with correct content-types, ICO checked by magic bytes; `/favicon.ico` returns 200 `image/x-icon`), watch the new tests fail, then implement. 6. Update `Release-Notes.md` (taibai thread) in the user-facing commit. **Branch:** `feat/favicon-raster-fallbacks` **Commits:** - `:white_check_mark: Add failing tests for raster favicon fallbacks` - `:art: Draw cloud favicon as explicit vector art in primary blue` - `:alien: Add ICO and apple-touch-icon raster fallbacks` **PR:** opened via Forgejo API, `feat/favicon-raster-fallbacks` → `main`, body ends with `Closes #61`, then ci-watch.

agent-pi referenced this issue from a pull request that will close it,

2026-10-01 04:16:10 +00:00

Self-contained cloud favicon with ICO and apple-touch-icon fallbacks #62

agent-pi closed this issue

2026-10-01 10:26:31 +00:00