fix: use the Chambers key for the PWA icon (#50) - #59
Merged
Conversation
The installed PWA showed an "SGA" wordmark while the rest of the site is branded Chambers. Both icon files were that wordmark. favicon.ico is the correct mark -- a white key on the navy background -- but it holds a single 32x32 image, so it is no use as a source for a 192px or 512px icon. The usable source is the decorative key on the login page, which is ordinary SVG geometry: two circles and four rounded rects. These icons are that same geometry rendered at size, so they match the favicon rather than approximating it. Provenance, in case they ever need regenerating: the shapes are copied verbatim from the key in app/page.tsx, minus that element's decorative scaleX(-1) rotate(-60deg), which leaves the key upright with the bow left and the teeth down -- the orientation favicon.ico already uses. Background is #0a1628, the same navy as the manifest's theme_color; the key is white; it sits at 78% of the canvas width. Rasterised with sharp. Deliberately full-bleed, with no rounded corners baked in, unlike the favicon. Android applies its own mask to launcher icons, and a rounded square inside that mask reads as a visibly clipped corner. No rounding of the source: the geometry is vector, so 512 is genuinely sharp rather than a 32px favicon scaled up. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #50.
Both PWA icons were an "SGA" wordmark while the rest of the site is branded Chambers — exactly as reported.
Where the artwork came from
favicon.icois the correct mark (a white key on navy) but it holds a single 32×32 image. Upscaling that 16× to 512px would have been a blurry mess, so it's no use as a source.The usable source is the decorative key on the login page — it's ordinary SVG geometry, two circles and four rounded rects. These icons are that same geometry rendered at size, so they match the favicon rather than approximating it, and 512px is genuinely sharp because the source is vector.
app/page.tsxkey geometryProvenance
Recorded in the commit message in case these ever need regenerating: shapes copied verbatim from the key in
app/page.tsx, minus that element's decorativescaleX(-1) rotate(-60deg)— which leaves the key upright, bow left, teeth down, the orientationfavicon.icoalready uses. Background#0a1628(the manifest's owntheme_color), key white, sitting at 78% of canvas width. Rasterised with sharp.One deliberate difference from the favicon
Full-bleed, with no rounded corners baked in. Android applies its own mask to launcher icons, and a rounded square inside that mask reads as a visibly clipped corner. The favicon needs its own rounding because it's displayed as-is; a PWA icon doesn't.
Happy to bake the rounding in if you'd rather they look identical.
Note on rollout
Existing installs may keep the old icon until the OS refreshes it — Android and iOS both cache launcher icons aggressively, and it can take a reinstall. Nothing to fix in code; just don't be surprised if it lingers on a device that already has it installed.