PWA-icoon: kaart-emoji als app-icoon voor mobiel/tablet #112

New issue

Closed

opened 2026-04-21 23:01:22 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-21 23:01:22 +02:00

(Migrated from codeberg.org)

Scope

`manifest.webmanifest` / `manifest.json` voorzien van icon-entries (192×192, 512×512, maskable).
Icons aanmaken: PNG-renders van de kaart-emoji óf een custom chunky illustratie in Routekaart-stijl (ink frame, paper achtergrond).
`` meta-tag toevoegen voor iOS.
Check resultaat op Android (Chrome PWA-install) en iOS (Safari > Add to Home Screen).

Overwegingen

Emoji-rendering verschilt per OS — beter een eigen PNG bakken dan emoji inline.
Maskable icon moet extra veilige marge hebben (rond/rond-square crop werkt).
Splashscreen-iconen zijn optioneel (nog niet geconfigureerd).

Tests

Manifest parseert in Chrome DevTools > Application > Manifest zonder warnings.
Lighthouse PWA-audit score blijft/verbetert.

Volgt na #111 en #101.

Als een gebruiker 'Voeg toe aan beginscherm' gebruikt (PWA-install op mobiel/tablet), krijgt hij nu het default-icoon. Zou fijn zijn als dat ook de kaart-emoji 🗺️ (of een mooie gestilleerde versie daarvan) werd, passend bij de Routekaart-branding. ## Scope - \`manifest.webmanifest\` / \`manifest.json\` voorzien van icon-entries (192×192, 512×512, maskable). - Icons aanmaken: PNG-renders van de kaart-emoji óf een custom chunky illustratie in Routekaart-stijl (ink frame, paper achtergrond). - \`<link rel="apple-touch-icon">\` meta-tag toevoegen voor iOS. - Check resultaat op Android (Chrome PWA-install) en iOS (Safari > Add to Home Screen). ## Overwegingen - Emoji-rendering verschilt per OS — beter een eigen PNG bakken dan emoji inline. - Maskable icon moet extra veilige marge hebben (rond/rond-square crop werkt). - Splashscreen-iconen zijn optioneel (nog niet geconfigureerd). ## Tests - Manifest parseert in Chrome DevTools > Application > Manifest zonder warnings. - Lighthouse PWA-audit score blijft/verbetert. Volgt na #111 en #101.

Ghost commented

2026-04-22 09:03:39 +02:00

(Migrated from codeberg.org)

Fixed in v2.23.0 — paper+ink kaart-emoji iconen, PNG-renders voor Android/iOS.