diff --git a/frontend-modern/public/logo.svg b/frontend-modern/public/logo.svg
index da00b87807..362d7aa789 100644
--- a/frontend-modern/public/logo.svg
+++ b/frontend-modern/public/logo.svg
@@ -1 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><circle fill="#3b82f6" cx="128" cy="128" r="122"/><circle fill="none" stroke="#fff" stroke-width="14" opacity=".92" cx="128" cy="128" r="84"/><circle fill="#fff" cx="128" cy="128" r="26"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <title>Pulse Logo</title>
+  <style>
+    /* Default (light mode) colors */
+    .pulse-bg { fill: #2563eb; }
+    .pulse-ring { fill: none; stroke: #ffffff; stroke-width: 14; opacity: 0.92; }
+    .pulse-center { fill: #ffffff; }
+    /* Dark mode colors. This file is the favicon only, so the OS colour
+       scheme is the correct signal. In-app surfaces render PulseBrandMark
+       instead, which follows the app's own theme class. */
+    @media (prefers-color-scheme: dark) {
+      .pulse-bg { fill: #3b82f6; }
+      .pulse-ring { stroke: #dbeafe; }
+      .pulse-center { fill: #dbeafe; }
+    }
+  </style>
+  <circle class="pulse-bg" cx="128" cy="128" r="122"/>
+  <circle class="pulse-ring" cx="128" cy="128" r="84"/>
+  <circle class="pulse-center" cx="128" cy="128" r="26"/>
+</svg>