Implementation: How should the PWA home screen icon be configured for iOS?

Documentation for Sessions

⚙️ Implementation: How should the PWA home screen icon be configured for iOS?

Date: 2026-02-12
Time: 04:21:26 UTC
Session: gspace1-108.11
Agent: angular
Confidence: 96%
Status: ✅ Documented

📋 Decision Context

Question:

How should the PWA home screen icon be configured for iOS?

Task: GoGrab Pulse - PWA icon for iOS home screen

🎯 Decision Made

Chosen:

PNG icons (180px and 512px) with dark background, generated from a dark-themed SVG

Options Considered:

  1. SVG icons only (gSpace-symbol-white.svg)
  2. PNG icons with dark background
  3. Both SVG and PNG with proper apple-touch-icon tags

💭 Reasoning

iOS does NOT properly support SVG for apple-touch-icon. When using the white gSpace-symbol-white.svg as the icon, iOS renders it on a white background making the logo invisible. The fix: (1) Created icon-apple.svg - the gSpace logo (white) on a dark background (#0a0a1a to #1a1a3a gradient) with a subtle purple glow. (2) Used macOS sips to convert to PNG: sips -s format png --resampleWidth 512 icon-apple.svg --out icon-512.png and sips -s format png --resampleWidth 180 icon-apple.svg --out icon-180.png. (3) HTML uses: <link rel='apple-touch-icon' sizes='180x180' href='/icon-180.png'> and <link rel='apple-touch-icon' sizes='512x512' href='/icon-512.png'>. (4) manifest.json references the PNG icons with purpose:'any' and keeps the SVG as purpose:'maskable' fallback. (5) Both the player (player/index.html) and landing page (index.html) need the apple-touch-icon tags. (6) After updating icons, users must delete the old PWA from their home screen and re-add it to see the new icon. (7) Files: icon-apple.svg (source), icon-180.png, icon-512.png all live in deploy/gograb-pulse/ root.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation