diff --git a/icons/light-favicon-16x16.png b/icons/light-favicon-16x16.png
new file mode 100755
index 0000000..c77529f
Binary files /dev/null and b/icons/light-favicon-16x16.png differ
diff --git a/icons/light-favicon-32x32.png b/icons/light-favicon-32x32.png
new file mode 100755
index 0000000..5d0fed3
Binary files /dev/null and b/icons/light-favicon-32x32.png differ
diff --git a/icons/light-favicon.ico b/icons/light-favicon.ico
new file mode 100755
index 0000000..3f6ca95
Binary files /dev/null and b/icons/light-favicon.ico differ
diff --git a/index.html b/index.html
index ecb501e..2766797 100644
--- a/index.html
+++ b/index.html
@@ -202,7 +202,8 @@
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
-    <script src='script.js'></script>
+    <script src="https://unpkg.com/favicon-mode-switcher@^1.0.0" defer></script>
+    <script src="script.js" defer></script>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/script.js b/script.js
index b027b37..8282fb8 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,22 @@
-(function (ThemeSwitcher) {
+!(function() {
+  const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
+  if (!iconModeSwitcher) return
+  iconModeSwitcher([
+    {
+      element: 'link[rel="shortcut icon"]',
+      href: { dark: '/icons/light-favicon.ico' }
+    },
+    {
+      element: 'link[rel="icon"][sizes="16x16"]',
+      href: { dark: '/icons/light-favicon-16x16.png' }
+    },
+    {
+      element: 'link[rel="icon"][sizes="32x32"]',
+      href: { dark: '/icons/light-favicon-32x32.png' }
+    }
+  ])
+})()
+;(function (ThemeSwitcher) {
   const themeSwitcher = new ThemeSwitcher('stylesheet');
   const themeSwitchBtn = document.getElementById('switch');
   const themes = {