diff --git a/index.html b/index.html
index e652e79..b41e041 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
-
+
Contexted
diff --git a/public/contexted-black.ico b/public/contexted-black.ico
new file mode 100644
index 0000000..0276185
Binary files /dev/null and b/public/contexted-black.ico differ
diff --git a/public/contexted-blue-inverted.ico b/public/contexted-blue-inverted.ico
new file mode 100644
index 0000000..c276561
Binary files /dev/null and b/public/contexted-blue-inverted.ico differ
diff --git a/public/contexted-blue.ico b/public/contexted-blue.ico
new file mode 100644
index 0000000..2d94229
Binary files /dev/null and b/public/contexted-blue.ico differ
diff --git a/public/contexted-white.ico b/public/contexted-white.ico
new file mode 100644
index 0000000..86fccd0
Binary files /dev/null and b/public/contexted-white.ico differ
diff --git a/src/main.ts b/src/main.ts
index 346bada..f9a8518 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,12 @@ import '@fortawesome/fontawesome-free/css/all.min.css'
import App from './App.vue'
import { setDefaultNotes } from '@/composables/useNotes'
import { defaultNotes } from '@/utils/defaultNotes'
+import { usePreferredDark, useFavicon } from '@vueuse/core'
+
+const isDark = usePreferredDark()
+const favicon = computed(() => (isDark.value ? '/contexted-white.ico' : '/contexted-black.ico'))
+useFavicon(favicon)
+
setDefaultNotes(defaultNotes)
createApp(App).mount('#app')