diff --git a/index.html b/index.html
index 626a87b..68cef02 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/pwa-192x192.png">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
   <meta name="msapplication-TileColor" content="#00aba9">
   <script>
-    (function() {
+    (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
       const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
       if (setting === 'dark' || (prefersDark && setting !== 'light'))
diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg
new file mode 100644
index 0000000..23402fa
--- /dev/null
+++ b/public/favicon-dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.562 26L17.17 8.928l2.366-3.888L17.828 4L16 7.005L14.17 4l-1.708 1.04l2.366 3.888L4.438 26H2v2h28v-2zM16 10.85L25.22 26H17v-8h-2v8H6.78z" fill="white" />
+</svg>
diff --git a/public/favicon.svg b/public/favicon.svg
index 12d3b56..614ec75 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <style>
-    path { fill: #222; }
-    @media (prefers-color-scheme: dark) {
-      path { fill: #ffffff; }
-    }
-  </style>
-  <path d="M27.562 26L17.17 8.928l2.366-3.888L17.828 4L16 7.005L14.17 4l-1.708 1.04l2.366 3.888L4.438 26H2v2h28v-2zM16 10.85L25.22 26H17v-8h-2v8H6.78z" />
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.562 26L17.17 8.928l2.366-3.888L17.828 4L16 7.005L14.17 4l-1.708 1.04l2.366 3.888L4.438 26H2v2h28v-2zM16 10.85L25.22 26H17v-8h-2v8H6.78z" fill="#222" />
 </svg>
diff --git a/src/App.vue b/src/App.vue
index a7120d7..1fe3ad0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
-import { isDark } from '~/composables'
+import { isDark, preferredDark } from '~/composables'
 
 useHead({
   title: 'Vitesse',
@@ -13,6 +13,13 @@ useHead({
       content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
     },
   ],
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/svg+xml',
+      href: computed(() => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg'),
+    },
+  ],
 })
 </script>
 
diff --git a/src/composables/dark.ts b/src/composables/dark.ts
index c745de5..5ad5936 100644
--- a/src/composables/dark.ts
+++ b/src/composables/dark.ts
@@ -1,3 +1,4 @@
 // these APIs are auto-imported from @vueuse/core
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()
