Tweak: move favicon population earlier (#7041)

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: {} },

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} />
           </>
         ) : (
           <>