diff --git a/app/index.tsx b/app/index.tsx
index b211fedb..75ce58d1 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 
 import { HomePage } from "@app/HomePage";
 
+import "@assets/Favicon";
 import { plausible } from "@assets/Plausible";
 
 createRoot(document.getElementById("app") as HTMLElement).render(
diff --git a/assets/Favicon.ts b/assets/Favicon.ts
new file mode 100644
index 00000000..cd86c537
--- /dev/null
+++ b/assets/Favicon.ts
@@ -0,0 +1,13 @@
+function prefersDarkColorScheme() {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function updateFavicon() {
+    const favicon = document.querySelector("link[rel=icon]") as HTMLLinkElement;
+    const url = "https://chatanalytics.app/";
+
+    favicon.href = url + (prefersDarkColorScheme() ? "favicon-dark.png" : "favicon.png");
+}
+
+updateFavicon();
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => updateFavicon());
diff --git a/assets/public/favicon-dark.png b/assets/public/favicon-dark.png
new file mode 100644
index 00000000..651f01ef
Binary files /dev/null and b/assets/public/favicon-dark.png differ
diff --git a/assets/public/favicon.ico b/assets/public/favicon.ico
new file mode 100644
index 00000000..7cf15e01
Binary files /dev/null and b/assets/public/favicon.ico differ
diff --git a/assets/public/favicon.png b/assets/public/favicon.png
index 651f01ef..cfa9c799 100644
Binary files a/assets/public/favicon.png and b/assets/public/favicon.png differ
diff --git a/assets/report.html b/assets/report.html
index cd5173c6..9cb0f110 100644
--- a/assets/report.html
+++ b/assets/report.html
@@ -6,7 +6,7 @@
 <meta name="robots" content="noindex, nofollow">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="Chat analysis report generated with chatanalytics.app">
-<link rel="shortcut icon" href="https://chatanalytics.app/favicon.png">
+<link rel="icon" href="https://chatanalytics.app/favicon.png">
 <link rel="preconnect" href="https://p.chatanalytics.app">
 <title>[[TITLE]]</title>
 <script type="text/plain" id="data">[[[DATA]]]</script>
diff --git a/report/index.tsx b/report/index.tsx
index 7cd5b11a..1dab9434 100644
--- a/report/index.tsx
+++ b/report/index.tsx
@@ -5,6 +5,7 @@ import { initBlockStore } from "@report/BlockStore";
 import ReportPage from "@report/ReportPage";
 import { initWorker } from "@report/WorkerWrapper";
 
+import "@assets/Favicon";
 import { plausible } from "@assets/Plausible";
 
 document.addEventListener("DOMContentLoaded", async () => {