Use the opaque iOS status bar and keep the SVG tab icon

black-translucent needs viewport-fit=cover and safe-area padding, which this change does not add. List the PNG favicon before the SVG so browsers that take the last usable icon keep the SVG, add mobile-web-app-capable, and give the manifest a stable id.

index.html

@@ -4,16 +4,19 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>God's Eye View</title>
-  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <!-- Raster fallbacks: Safari ignores an SVG apple-touch-icon and falls back to a
        screenshot of the page, so an installed app needs a real PNG. Regenerate
        these from the logo with `node scripts/generate-icons.mjs`. -->
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32.png" />
+  <!-- Listed after the PNG: browsers that use the last usable icon keep the SVG
+       for the tab. -->
+  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180.png" />
   <link rel="manifest" href="/manifest.webmanifest" />
   <meta name="theme-color" content="#0a0a0f" />
+  <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <meta name="apple-mobile-web-app-title" content="God's Eye" />
   <link rel="stylesheet" href="/style.css" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />

public/manifest.webmanifest

@@ -1,4 +1,5 @@
 {
+  "id": ".",
   "name": "God's Eye View",
   "short_name": "God's Eye",
   "description": "Live spatial intelligence in the browser.",