Put the PNG favicon on an opaque dark tile

docs/operations.md

@@ -12,7 +12,7 @@
 - `internal/codex`: the `codex app-server` JSON-RPC client, with types generated from the CLI's schema by `go generate ./internal/codex` (see `docs/codex-protocol.md`).
 - `internal/tailscale`: `tailscale serve` for task previews (see "Previews").
 - `internal/workflow`: validating workflow definitions and reading and writing their YAML files (see "Workflows").
-- `web/`: the SPA, frameworkless TypeScript compiled file-by-file to ES modules (no bundler). `web/src/*.ts` is the source; `web/src/api.gen.ts` holds types generated from `api/openapi.yaml`, and `web/src/api.ts` is the typed client over them. `go generate ./web` runs `npm ci`, regenerates the types and compiles `web/dist/`, which is committed so `go install` needs no Node. The binary embeds `index.html`, `style.css`, `favicon.svg` (a lead dot in the accent colour with spokes to five task-coloured dots; its colours are copies of the `web/style.css` palette, switching with the light/dark scheme), `favicon.png` (the same icon in its light colours at 180×180, linked as a second icon and as the `apple-touch-icon`, which Orion prefers over the SVG for its tab icon; Orion's icon store (`~/Library/Application Support/Orion/Defaults/website_icons`, kept apart from its cache) keys icons by hostname without the port, so another server on the same hostname can supply byre's tab icon; regenerate it after changing the SVG with `rsvg-convert --width 180 --height 180 --output web/favicon.png web/favicon.svg`), `dist/`, `src/` (for source maps), `fonts/` and `vendor/` (Mermaid, see "Inbox"; xterm.js, see "Terminals"). `byre serve --dev` serves `./web` from disk instead (run from the repo root); pair it with `npm --prefix web exec tsc -- --watch`.
+- `web/`: the SPA, frameworkless TypeScript compiled file-by-file to ES modules (no bundler). `web/src/*.ts` is the source; `web/src/api.gen.ts` holds types generated from `api/openapi.yaml`, and `web/src/api.ts` is the typed client over them. `go generate ./web` runs `npm ci`, regenerates the types and compiles `web/dist/`, which is committed so `go install` needs no Node. The binary embeds `index.html`, `style.css`, `favicon.svg` (a lead dot in the accent colour with spokes to five task-coloured dots; its colours are copies of the `web/style.css` palette, switching with the light/dark scheme), `favicon.png` (the same icon in its dark colours on an opaque dark `--surface` square at 180×180, rendered from `web/favicon-tile.svg`, which is not embedded; opaque because Orion puts a transparent icon on a white tile; linked as a second icon and as the `apple-touch-icon`, which Orion prefers over the SVG for its tab icon; Orion's icon store (`~/Library/Application Support/Orion/Defaults/website_icons`, kept apart from its cache) keys icons by hostname without the port, so another server on the same hostname can supply byre's tab icon; `favicon-tile.svg` repeats the shapes and dark colours of `favicon.svg`, so change both together, then regenerate the PNG with `rsvg-convert --width 180 --height 180 --output web/favicon.png web/favicon-tile.svg`), `dist/`, `src/` (for source maps), `fonts/` and `vendor/` (Mermaid, see "Inbox"; xterm.js, see "Terminals"). `byre serve --dev` serves `./web` from disk instead (run from the repo root); pair it with `npm --prefix web exec tsc -- --watch`.
 
 ## Data
 

web/favicon-tile.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+<rect width="36" height="36" fill="#1c1f23"/>
+<g transform="translate(2 2.5)" stroke="#a9b1bc" stroke-width="1.5">
+<line x1="16" y1="16" x2="16" y2="4"/>
+<line x1="16" y1="16" x2="27.4" y2="12.3"/>
+<line x1="16" y1="16" x2="23.1" y2="25.7"/>
+<line x1="16" y1="16" x2="8.9" y2="25.7"/>
+<line x1="16" y1="16" x2="4.6" y2="12.3"/>
+</g>
+<g transform="translate(2 2.5)">
+<circle fill="#8ab4ff" cx="16" cy="16" r="6"/>
+<circle fill="#fe9fa6" cx="16" cy="4" r="3.5"/>
+<circle fill="#ffa383" cx="27.4" cy="12.3" r="3.5"/>
+<circle fill="#99d079" cx="23.1" cy="25.7" r="3.5"/>
+<circle fill="#b6b4fe" cx="8.9" cy="25.7" r="3.5"/>
+<circle fill="#2fd4ec" cx="4.6" cy="12.3" r="3.5"/>
+</g>
+</svg>