From f2dc80e39e04053c63a330adc822ae2bbb3ad20b Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 21 Aug 2026 14:06:21 -0700
Subject: [PATCH] Tweak: move favicon population earlier (#7041)

---
 src/__tests__/pages/index.test.jsx | 17 +++++++++++++++--
 src/pages/index.jsx                |  7 ++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/pages/index.test.jsx b/src/__tests__/pages/index.test.jsx
index 1709be353..c543161c7 100644
--- a/src/__tests__/pages/index.test.jsx
+++ b/src/__tests__/pages/index.test.jsx
@@ -524,7 +524,7 @@ describe("pages/index Home behavior", () => {
     state.widgetsData = [];
 
     const { setTheme, setColor, setSettings } = await renderIndex({
-      initialSettings: { title: "Homepage", layout: {} },
+      initialSettings: { title: "Homepage", layout: {}, favicon: "/x.ico" },
       settings: {
         title: "Homepage",
         layout: {},
@@ -533,7 +533,6 @@ describe("pages/index Home behavior", () => {
         color: "emerald",
         disableIndexing: true,
         base: "/base/",
-        favicon: "/x.ico",
       },
       theme: "dark",
       color: "slate",
@@ -551,6 +550,20 @@ describe("pages/index Home behavior", () => {
     expect(document.querySelector('link[rel="icon"]')?.getAttribute("href")).toBe("/x.ico");
   });
 
+  // Safari reads the head without running JS, so the favicon has to be there before the
+  // settings context is populated, and mask-icon must not be
+  it("renders a custom favicon before the settings context is populated", async () => {
+    await renderIndex({
+      initialSettings: { title: "Homepage", layout: {}, favicon: "/x.ico" },
+      settings: {},
+    });
+
+    expect(document.querySelector('link[rel="icon"]')?.getAttribute("href")).toBe("/x.ico");
+    expect(document.querySelector('link[rel="apple-touch-icon"]')?.getAttribute("href")).toBe("/x.ico");
+    expect(document.querySelector('link[rel="mask-icon"]')).toBeNull();
+    expect(document.querySelector('link[rel="shortcut icon"]')).toBeNull();
+  });
+
   it("marks information widgets as right-aligned for known widget types", async () => {
     await renderIndex({
       initialSettings: { title: "Homepage", layout: {} },
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 7dfcc841b..6372b777f 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -426,10 +426,11 @@ function Home({ initialSettings }) {
         />
         {settings.disableIndexing && <meta name="robots" content="noindex, nofollow" />}
         {settings.base && <base href={settings.base} />}
-        {settings.favicon ? (
+        {/* from props, not context so its set before running JS */}
+        {initialSettings.favicon ? (
           <>
-            <link rel="icon" href={settings.favicon} />
-            <link rel="apple-touch-icon" sizes="180x180" href={settings.favicon} />
+            <link rel="icon" href={initialSettings.favicon} />
+            <link rel="apple-touch-icon" sizes="180x180" href={initialSettings.favicon} />
           </>
         ) : (
           <>