接入品牌素材

标签页图标只声明 favicon.ico。它带 16/32/48/64 四个尺寸、是照着小尺寸调过
的；而这套素材里 .ico 是深底浅图、PNG 那一组是白底黑图，两个都声明的话浏览器
会按显示密度在两者间挑，同一个标签页会换样子。

素材里的 favicon.svg 没有采用：里面是一张 512px 的 PNG 用 base64 塞在
<image> 里，不是矢量，比 favicon.png 还大 3.4KB。

web/index.html

@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
+    <!-- 标签页图标只声明 .ico：它里面有 16/32/48/64 四个尺寸，是照着小尺寸调过的。
+         再声明一个大 PNG 的话，浏览器会按显示密度在两者之间挑，而这套素材的 .ico 是
+         深底浅图、PNG 是白底黑图，挑到哪个不一定，同一个标签页会换样子。 -->
+    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <!-- 移动端浏览器地址栏的底色，跟着系统主题走，和 tokens.css 里的 --c-bg 一致 -->
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fbfbfc" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#16181c" />
     <title>Patchbay</title>
   </head>
   <body>

web/public/site.webmanifest

@@ -0,0 +1,34 @@
+{
+  "name": "Patchbay",
+  "short_name": "Patchbay",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#fbfbfc",
+  "theme_color": "#fbfbfc",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}