From a9ad6a70d667cf1bd2d602983014f1cc37e38b66 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 10 Nov 2025 15:45:12 +0100
Subject: [PATCH] fix: initial default favicon

Uses the OpenCloud logo as default favicon until the theme favicon is loaded. This fixes an issue where OpenCloud would not have any bookmark icon in Firefox due to the initially missing favicon.

Unfortunately, we can't use `vueuse/head` because it would result in a duplicated `<link rel="">` tag.

(cherry picked from commit d7ead8ad6abef9b97998113bf248afb8749c2461)
---
 index.html                                    |  1 +
 packages/web-container/img/favicon.svg        |  3 ++
 .../src/composables/piniaStores/theme.ts      | 14 ++++++++
 .../src/composables/head/useHead.ts           | 32 +++++++------------
 4 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 packages/web-container/img/favicon.svg

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(', ')
       }
-    })
-  )
+    ])
+  })
 }