benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-05 10:53:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: ship a web app manifest and home-screen icons

Browse Source 
Adding the app to a phone home screen produced a blank tile: index.html
linked only an SVG favicon, and Safari ignores SVG for apple-touch-icon,
substituting a screenshot of the page. There was no manifest at all, so
Android had nothing to install against either.

Generate the rasters from public/logo.svg with sharp, which the repo
already carries. The output is committed so a plain `vite build` needs no
image toolchain; re-run scripts/generate-icons.mjs after changing the
logo. The logo's viewBox is wider than it is tall, so each icon centres
the mark on a square #0a0a0f canvas rather than stretching it, inset to
78% normally and 54% for the maskable variant to survive Android's
circular crop.

The SVG favicon stays as the browser tab icon.
This commit is contained in:
Cliff Flood committed 2026-10-13 18:54:58 -04:00
1 parent 132b9e96dc
commit bdd64660e7
12 files changed
+196 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/CURRENT-STATE.md
+16
View File
@@ -1131,6 +1131,22 @@ services, local voice and standalone key setup. Importing them starts no network
acquisition. Browser layer lifecycle, rendering and voice execution stay in their
existing modules.
## Web app install icons
`public/manifest.webmanifest` declares the installable app: standalone display,
`#0a0a0f` background and theme, and 192/512 icons plus a 512 maskable variant.
`index.html` links the manifest, a 180px `apple-touch-icon` and a 32px PNG
favicon; the existing SVG favicon still serves the browser tab. Safari ignores an
SVG apple-touch-icon and substitutes a page screenshot, so the raster is what
makes an installed icon appear at all.
`node scripts/generate-icons.mjs` renders every raster from `public/logo.svg` and
writes `public/icons/`. Output is committed, so building needs no image
toolchain; re-run the script after changing the logo. Ordinary icons inset the
mark to 78% of the canvas and the maskable variant to 54%, keeping it inside the
circle Android may crop to. `src/tooling/webAppIcons.test.mjs` checks the links,
the manifest fields and that each committed PNG is square at its declared size.
## Local build preview
After `npm run build`, `npm run preview` serves the built app with the same data