fix(favicon): re-embed dynamic favicon into index.html (redhat-developer#2408)

logonoff · web-flow · commit 9eea264f14bf · 2025-03-11T09:56:44.000Z
fixes https://issues.redhat.com/browse/RHIDP-6015 - do not show janus favicons if a custom favicon is set, so that there are no issues with which favicon should take priority - do not use the "Janus Community Showcase" metadata description if `app.title` is set - move the favicon `ConfigUpdater`to outside the `AppRouter` component so that it can work in the `OauthRequestDialog` before: ![before](https://i.imgur.com/XC50VxV.png) after: ![after](https://i.imgur.com/konWQrQ.png)
diff --git a/packages/app/public/index.html b/packages/app/public/index.html
@@ -4,15 +4,23 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Janus Community Showcase" />
+    <meta
+      name="description"
+      content="<%= config.getOptionalString('app.title') ?? 'Red Hat Developer Hub' %>"
+    />
+    <% if (config.getOptionalString('app.branding.iconLogo')) { %>
+    <link
+      rel="icon"
+      href="<%= config.getOptionalString('app.branding.iconLogo') %>"
+      id="dynamic-favicon"
+    />
+    <% } else { %>
     <link rel="apple-touch-icon" href="<%= publicPath %>/logo192.png" />
     <link
       rel="manifest"
       href="<%= publicPath %>/manifest.json"
       crossorigin="use-credentials"
     />
-    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
-    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -35,7 +43,14 @@
       href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
-    <link rel="icon" id="dynamic-favicon" href="/favicon.ico" />
+    <link
+      rel="icon"
+      id="dynamic-favicon"
+      href="<%= publicPath %>/favicon.ico"
+    />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
+    <% } %>
+
     <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
   </head>
   <body>
diff --git a/packages/app/src/components/AppBase/AppBase.tsx b/packages/app/src/components/AppBase/AppBase.tsx
@@ -76,8 +76,8 @@ const AppBase = () => {
     <AppProvider>
       <AlertDisplay />
       <OAuthRequestDialog />
+      <ConfigUpdater />
       <AppRouter>
-        <ConfigUpdater />
         <ApplicationListener />
         <Root>
           <ApplicationProvider>
