diff --git a/web/index.html b/web/index.html
index 139121e..425308f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -22,6 +22,22 @@
        "same-origin" keeps the real Origin on same-origin requests, so CSRF passes. -->
   <meta name="referrer" content="same-origin">
   <title>TSMusicBot</title>
+  <!-- Icons live in web/public/ so Vite copies them to the dist root, which is
+       what Express serves (src/index.ts STATIC_DIR). Both an .ico and an .svg
+       are declared: browsers that understand the vector one prefer it and stay
+       sharp on hi-dpi tabs, the rest fall back to the .ico. The .ico also
+       answers the implicit /favicon.ico request — without a real file there the
+       SPA catch-all hands back index.html with a 200, so the tab silently keeps
+       the blank-page icon (issue #142). -->
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
+  <!-- iOS home-screen icon; iOS masks the corners itself, so this one is a
+       full square. Android reads the manifest instead. -->
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <!-- Matches --bg-primary of the dark theme, which is what the app starts in
+       (stores/player.ts defaults to 'dark' and never follows the OS scheme). -->
+  <meta name="theme-color" content="#222222">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 </head>
diff --git a/web/public/apple-touch-icon.png b/web/public/apple-touch-icon.png
new file mode 100644
index 0000000..a8cfab0
Binary files /dev/null and b/web/public/apple-touch-icon.png differ
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
new file mode 100644
index 0000000..b057b4b
Binary files /dev/null and b/web/public/favicon.ico differ
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
new file mode 100644
index 0000000..bd75457
--- /dev/null
+++ b/web/public/favicon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="22" fill="#335eea"/>
+  <g fill="#ffffff" transform="translate(48.46 51.1) scale(0.88) translate(-50 -50)">
+    <path d="M43.5 24 L86.5 15 L86.5 26 L43.5 35 Z"/>
+    <rect x="43.5" y="24" width="6" height="47"/>
+    <rect x="80.5" y="15" width="6" height="47"/>
+    <ellipse cx="32" cy="71" rx="15" ry="11.5" transform="rotate(-20 32 71)"/>
+    <ellipse cx="69" cy="62" rx="15" ry="11.5" transform="rotate(-20 69 62)"/>
+  </g>
+</svg>
diff --git a/web/public/icon-192.png b/web/public/icon-192.png
new file mode 100644
index 0000000..deffd54
Binary files /dev/null and b/web/public/icon-192.png differ
diff --git a/web/public/icon-512.png b/web/public/icon-512.png
new file mode 100644
index 0000000..ae4599a
Binary files /dev/null and b/web/public/icon-512.png differ
diff --git a/web/public/icon-maskable-512.png b/web/public/icon-maskable-512.png
new file mode 100644
index 0000000..6961a09
Binary files /dev/null and b/web/public/icon-maskable-512.png differ
diff --git a/web/public/site.webmanifest b/web/public/site.webmanifest
new file mode 100644
index 0000000..28e1a78
--- /dev/null
+++ b/web/public/site.webmanifest
@@ -0,0 +1,26 @@
+{
+  "name": "TSMusicBot",
+  "short_name": "TSMusicBot",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#222222",
+  "theme_color": "#222222",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}