diff --git a/web/pandas/_templates/layout.html b/web/pandas/_templates/layout.html
index 023bfe9e26b78..49990ac60fcd4 100644
--- a/web/pandas/_templates/layout.html
+++ b/web/pandas/_templates/layout.html
@@ -12,7 +12,7 @@
         <title>pandas - Python Data Analysis Library</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel='shortcut icon' type='image/x-icon' href='{{ base_url }}/static/img/favicon.ico'/>
+        <link rel='shortcut icon' type='image/x-icon' id='favicon-tag' href='{{ base_url }}/static/img/favicon.ico'/>
         <link rel="stylesheet"
               href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
               integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
@@ -99,5 +99,18 @@
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                 integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                 crossorigin="anonymous"></script>
+        <script type="text/javascript">
+            const faviconTag = document.getElementById('favicon-tag');
+            const matcher = window.matchMedia('(prefers-color-scheme:dark)');
+            
+            const onUpdate = () => {
+                if (matcher.matches) faviconTag.href = "{{ base_url }}/static/img/favicon_white.ico";
+                else faviconTag.href = "{{ base_url }}/static/img/favicon.ico";
+            };
+            
+            onUpdate();
+            
+            matcher.addEventListener('change', onUpdate);
+        </script>
     </body>
 </html>
diff --git a/web/pandas/static/img/favicon_white.ico b/web/pandas/static/img/favicon_white.ico
new file mode 100644
index 0000000000000..68223fc92f456
Binary files /dev/null and b/web/pandas/static/img/favicon_white.ico differ