Use the real icon whenever possible #35
Labels
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
Grandiras/Ponente#35
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Currently, we have the simplified icon for tab headers. But it's e.g. also used as a web app icon. Whenever we have enough space, we should use the original icon.
🤖 On it — follow along in the action run; the reply will link the full session transcript.
📜 Live transcript — updating every ~5 minutes while the task runs.
Pushed to
claude/issue-35(compare).What the problem actually was
favicon.svgwas the only icon the app declared — there was no web app manifest and noapple-touch-icon. So when a browser installs the site (home screen, launcher, desktop shortcut) it had nothing but the favicon to install, and shipped the deliberately-reduced 16 px cut at 192 px.What I did
Three new SVGs in
wwwroot— one family, three separate decisions, not copies:icon.svg— the full mark as a file. A Chromium render of it and ofBrandMark.razoris pixel-for-pixel identical (verified, 0 px differ).apple-touch-icon.svg— same artwork, full bleed. iOS composites a home-screen icon on black and applies its own squircle mask, soicon.svg's transparent surround would come back as a black ring and its 25% corners would be rounded twice.icon-maskable.svg— full bleed, artwork scaled 0.78 about the centre. An Android launcher may crop to a circle of 80% diameter; at full size the sun's halo reaches 31.4 of our 64 and loses its top-right edge. 0.78 brings the furthest point to 24.5, inside the 25.6 safe circle, while the gradient still runs edge to edge.favicon.svgis untouched and stays the onlyrel="icon". I deliberately did not add a secondrel="icon" sizes="any"pointing at the full mark — that lets the browser choose it for a 16 px tab, which is exactly the mush the reduced cut exists to prevent. The full mark reaches the large surfaces via channels that are large by definition (manifest, apple-touch-icon).manifest.json, notsite.webmanifest: an extension the static-file content-type map doesn't know is served as a 404, and.jsonalways is. It declares 192/512anyplus a 512maskable.tools/render-icons.sh— the PNGs are committed build output and must be re-rendered when a source SVG changes, or iOS and Android keep showing the old mark. Needs librsvg; ImageMagick's built-in SVG renderer is not a substitute (it drops the gradient fills and paints the squircle black — I hit that first).tests/e2e/icons.spec.jsand aCLAUDE.mdsection covering all of the above.Verified
dotnet build Ponente.sln— clean, 0 warnings.dotnet test— 46/46 pass./manifest.json→ 200application/json, all four PNGs → 200image/png, all served anonymously; the three<link>tags render in/login's head.Page.getAppManifestover the running app: manifest fetched, zero parse errors, 3 icons, console clean.icons.spec.js— 4/4 pass against the live app.auth-entrance.spec.js— 9/9 pass (the existing spec that leans hardest onApp.razor's head).icon-*.pngcolour type 6 (keeps the squircle's transparency),apple-touch-icon.png/icon-maskable-512.pngcolour type 2 (opaque, full bleed).One thing I couldn't run here: the full compose stack (no podman/docker in the CI container), so
board.spec.jsand friends weren't exercised — nothing in this change touches them, but worth a normal--force-recreaterun before merging.⏱ 13m 46s · 68 turns · tokens: 82.1k in / 42.3k out (+4125.4k cache-read)
📜 Full session transcript
→ Opened PR: #40