diff --git a/docs/manual-verification.md b/docs/manual-verification.md
index dd80bf0..01c05c8 100644
--- a/docs/manual-verification.md
+++ b/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
- wants a PNG `apple-touch-icon`, so the iOS home-screen icon may fall back.
+- [ ] iPad add-to-home-screen (Safari → Share → Add to Home Screen) shows the astrolabe
+ `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
diff --git a/index.html b/index.html
index 0541810..2ca84bb 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
+
Astrolabe
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..9e20364
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/vite.config.ts b/vite.config.ts
index d4dda62..d742af1 100644
--- a/vite.config.ts
+++ b/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
- // a known residual.) maskable = Android adaptive; monochrome = tinted mark.
+ // icons. maskable = Android adaptive; monochrome = tinted mark. Safari
+ // 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
+ // 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: {