diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e31e29f21b..26c10fb190 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -148,7 +148,18 @@ export default async function RootLayout(props: Props) {
           <SayHi />
           <HydrationEndDetector />
 
-          <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+          <link
+            rel="shortcut icon"
+            href={themeConfig.config.site.faviconDark}
+            type="image/x-icon"
+            media="(prefers-color-scheme: dark)"
+          />
+          <link
+            rel="shortcut icon"
+            href={themeConfig.config.site.favicon}
+            type="image/x-icon"
+            media="(prefers-color-scheme: light)"
+          />
         </head>
         <body
           className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}
