PWA: iPad apple-touch-icon for home-screen install

docs/manual-verification.md

@@ -16,8 +16,9 @@
 - [ ] Android adaptive icon (maskable) fills the OS shape without clipping the mark.
 - [ ] Service-worker update flow: ship a new build, reload — the update-available
       prompt appears and applying it loads the new version (`registerType: 'prompt'`).
-- [ ] iOS home-screen icon — **known residual**: the manifest ships SVG only; iOS
+- [ ] iPad add-to-home-screen (Safari → Share → Add to Home Screen) shows the astrolabe
-      wants a PNG `apple-touch-icon`, so the iOS home-screen icon may fall back.
+      `apple-touch-icon.png`, not a page screenshot or generic glyph. Phones are out of
+      scope — iPad is the only touch surface Astrolabe targets.
 
 ## Keyboard & accessibility
 

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="mask-icon" href="/icon-mono.svg" color="#0e7490" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Astrolabe</title>
   </head>

vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
     react(),
     VitePWA({
       registerType: 'prompt',
-      includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg'],
+      includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg', 'apple-touch-icon.png'],
       manifest: {
         name: 'Astrolabe',
         short_name: 'Astrolabe',
@@ -47,12 +47,18 @@ export default defineConfig({
         background_color: '#ffffff',
         display: 'standalone',
         // SVG marks scale to any size — Chrome/Edge/desktop install accept SVG
-        // icons. (iOS home-screen still prefers a PNG apple-touch-icon; tracked as
+        // icons. maskable = Android adaptive; monochrome = tinted mark. Safari
-        // a known residual.) maskable = Android adaptive; monochrome = tinted mark.
+        // ignores SVG and the manifest both, so the 180×180 PNG covers the one
+        // touch surface we target — iPad add-to-home-screen (Astrolabe is a
+        // desktop/tablet tool, not a phone app). It's linked as
+        // <link rel="apple-touch-icon"> in index.html, where Safari reads it; the
+        // PNG is the favicon art rasterized full-bleed (no self-rounding — iOS
+        // masks its own corners).
         icons: [
           { src: 'favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' },
           { src: 'icon-maskable.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'maskable' },
           { src: 'icon-mono.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'monochrome' },
+          { src: 'apple-touch-icon.png', sizes: '180x180', type: 'image/png', purpose: 'any' },
         ],
       },
       workbox: {