Dynamic Favicon

document.querySelector("link[rel~='icon']")

Strategy Best For Notes

Hostname/Subdomain One app deployed for all clients Dynamic, one build
Env Variable per Build Separate builds per client Static favicon per client build
API-based User-based or late client detection Set favicon after API response

Strategy	Best For	Notes
Hostname/Subdomain	One app deployed for all clients	Dynamic, one build
Env Variable per Build	Separate builds per client	Static favicon per client build
API-based	User-based or late client detection	User-based or late client detection

Env Variable METHOD

config.js

export const DOMAIN_LISTS = {
  INFOCOM: "info",
  PRABHU: "bank",
  NIMB: "nimb",
  ADBL: "adbl",
};

export const PATH = {
  ASSETS: "/assets/",
};

export const FAVICONS = {
  [DOMAIN_LISTS.INFOCOM]: `${PATH.ASSETS}infocom.ico`,
  [DOMAIN_LISTS.PRABHU]: `${PATH.ASSETS}prabhu.ico`,
  [DOMAIN_LISTS.NIMB]: `${PATH.ASSETS}nimb.ico`,
  [DOMAIN_LISTS.ADBL]: `${PATH.ASSETS}adbl.ico`,
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- REMOVE THIS FROM HERE  -->
    <!-- <link rel="icon" type="image/svg+xml" href="/assets/favicon.ico" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bank App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

App.jsx

import { DOMAIN_LISTS, FAVICONS, PATH } from "@shared/utils/config"; // Adjust the import path as needed
const buildMode = import.meta.env.VITE_REACT_APP_BUILD_MODE; // e.g. "adbl", "info", etc.

import { useEffect } from "react";
import { DOMAIN_LISTS, FAVICONS, PATH } from "@shared/utils/config";

function App() {
  const buildMode = import.meta.env.VITE_REACT_APP_BUILD_MODE;

  useEffect(() => {
    let favicon = document.querySelector("link[rel~='icon']");
    if (!favicon) {
      favicon = document.createElement("link");
      favicon.rel = "icon";
      favicon.type = "image/x-icon";
      document.head.appendChild(favicon);
    }

    // Set favicon based on buildMode, fallback to default.ico if not found
    favicon.href = FAVICONS[buildMode] || `${PATH.ASSETS}default.ico`;
  }, [buildMode]);

  return (
    // Your component JSX here
  );
}

export default App;

What this does:

On component mount or whenever buildMode changes, it:

Looks for existing <link rel="icon"> tag or creates one.
Sets its href to the correct favicon path from your FAVICONS map.
Falls back to /assets/default.ico if buildMode is not mapped.

Bonus tips:

Make sure default.ico exists at /assets/default.ico.
Ensure your favicon files exist at the correct locations.
Clear browser cache or test in incognito to see changes immediately.

Add a small cache-busting query param to avoid favicon being stuck in browser cache (optional):

favicon.href = `${
  FAVICONS[CONFIG.BUILD_MODE] || `${PATH.ASSETS}default.ico`
}?v=${Date.now()}`;

Only necessary during dev or frequent icon switching, though.

Include a fallback `<link rel="icon" />` in `index.html` for early loading

This prevents the browser from defaulting to /favicon.ico before your React app mounts.

In public/index.html (or whatever your entry HTML is):

<link rel="icon" href="/assets/default.ico" type="image/x-icon" />

Then your dynamic logic will override this as soon as React loads.

EXTRA

If i add the the favicon.ico in the index.html