diff --git a/index.html b/index.html
index 5b0a6731bc..ecccb4f849 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
 
     <title><%= data.title %></title>
     <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" href="img/favicon.svg" />
     <% if (data.buildConfig.cdn) { %>
     <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.7/require.min.js"></script>
     <script>
diff --git a/packages/web-container/img/favicon.svg b/packages/web-container/img/favicon.svg
new file mode 100644
index 0000000000..08f2fecc5d
--- /dev/null
+++ b/packages/web-container/img/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="512" height="512"><svg id="SvgjsSvg1001" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect x=".02" y="0" width="512" height="512" fill="#20434f"></rect><polygon points="255.98 342.75 271.89 333.57 271.89 267.12 329.08 234.1 329.08 215.78 313.18 206.6 255.6 239.84 198.83 207.06 182.93 216.24 182.93 234.56 240.12 267.58 240.12 333.59 255.98 342.75" fill="#e2baff"></polygon><polygon points="401.95 150.82 256 66.56 256 66.56 256 66.56 110.05 150.82 110.05 187.5 256 103.24 401.95 187.5 401.95 150.82" fill="#e2baff"></polygon><polygon points="401.95 324.5 256 408.76 110.06 324.5 110.06 361.17 256 445.43 256 445.43 256 445.43 401.95 361.17 401.95 324.5" fill="#e2baff"></polygon></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file
diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index f457435851..e8b255ce1d 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -64,6 +64,16 @@ export type ThemeConfigType = z.infer<typeof ThemeConfig>
 
 const themeStorageKey = 'oc_currentThemeName'
 
+const setFavicon = (url: string) => {
+  let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement
+  if (!link) {
+    link = document.createElement('link')
+    link.rel = 'icon'
+    document.head.appendChild(link)
+  }
+  link.href = url
+}
+
 export const useThemeStore = defineStore('theme', () => {
   const currentLocalStorageThemeName = useLocalStorage(themeStorageKey, null)
 
@@ -130,6 +140,10 @@ export const useThemeStore = defineStore('theme', () => {
       applyCustomProp('role-chrome', unref(currentTheme).designTokens?.roles?.surfaceContainer)
       applyCustomProp('role-on-chrome', unref(currentTheme).designTokens?.roles?.onSurface)
     }
+
+    if (unref(currentTheme).favicon) {
+      setFavicon(unref(currentTheme).favicon)
+    }
   }
 
   const getRoleIcon = (role: ShareRole) => {
diff --git a/packages/web-runtime/src/composables/head/useHead.ts b/packages/web-runtime/src/composables/head/useHead.ts
index 995536e1b2..a43fdc70ed 100644
--- a/packages/web-runtime/src/composables/head/useHead.ts
+++ b/packages/web-runtime/src/composables/head/useHead.ts
@@ -1,29 +1,19 @@
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 import { useHead as _useHead } from '@vueuse/head'
 import { getBackendVersion, getWebVersion } from '../../container/versions'
-import { useCapabilityStore, useThemeStore } from '@opencloud-eu/web-pkg'
-import { storeToRefs } from 'pinia'
+import { useCapabilityStore } from '@opencloud-eu/web-pkg'
 
 export const useHead = () => {
-  const themeStore = useThemeStore()
   const capabilityStore = useCapabilityStore()
-  const { currentTheme } = storeToRefs(themeStore)
 
-  const favicon = computed(() => unref(currentTheme).favicon)
-
-  _useHead(
-    computed(() => {
-      return {
-        meta: [
-          {
-            name: 'generator',
-            content: [getWebVersion(), getBackendVersion({ capabilityStore })]
-              .filter(Boolean)
-              .join(', ')
-          }
-        ],
-        ...(unref(favicon) && { link: [{ rel: 'icon', href: unref(favicon) }] })
+  _useHead({
+    meta: computed(() => [
+      {
+        name: 'generator',
+        content: [getWebVersion(), getBackendVersion({ capabilityStore })]
+          .filter(Boolean)
+          .join(', ')
       }
-    })
-  )
+    ])
+  })
 }