Client-Side Favicon Modification

[InternetBowser670]

Summary

I'm currently working on an app where the users should be able to modify the sites favicon. I'm saving the favicon in localStorage as "siteIcon" and applying it on render, but as far as I know, there's no way to do that. Please provide any info that you have, thank you.

Additional information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 31850
  Available CPU cores: 16
Binaries:
  Node: 22.18.0
  npm: 10.9.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.2 // There is a newer version (15.5.2) available, upgrade recommended!
  eslint-config-next: 15.3.2
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3

Example

No response

[icyJoseph]

Maybe https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260877#260877? the target the favicon element and change it - you could do that on a click handler, etc

[InternetBowser670]

I reverted my changes, though I do still have this: Uncaught TypeError: Cannot read properties of null (reading 'removeChild')

(In effect react is unable to remove the replaced element because it has changed from what it was in the virtual DOM)

[icyJoseph]

yeah - I see - strange though cuz one should be able to mutate the DOM node, without React losing the reference - I'll try to take a look

[InternetBowser670]

Thanks!

[icyJoseph]

I tried with this:

function setFavicon(href: string, type?: string) {
  if (typeof document === "undefined") return;

  let link = document.querySelector<HTMLLinkElement>(
    'link[data-dynamic-favicon="true"]'
  );

  if (!link) {
    link = document.createElement("link");
    link.rel = "icon";
    link.setAttribute("data-dynamic-favicon", "true");
    document.head.appendChild(link);
  }

  link.rel = "icon";
  if (type) link.type = type;
  else link.removeAttribute("type");
  link.href = href;
}

Used something like:

const options: FaviconOption[] = [
  {
    label: "Default (favicon.ico)",
    href: "/favicon.ico",
    type: "image/x-icon",
  },
  { label: "Next logo SVG", href: "/next.svg", type: "image/svg+xml" },
  { label: "Vercel logo SVG", href: "/vercel.svg", type: "image/svg+xml" },
  { label: "Globe SVG", href: "/globe.svg", type: "image/svg+xml" },
  { label: "Window SVG", href: "/window.svg", type: "image/svg+xml" },
  { label: "File SVG", href: "/file.svg", type: "image/svg+xml" },
];

export default function FaviconSwitcher() {
  return (
    <div className="flex flex-col gap-2 w-full max-w-sm">
      <label htmlFor="favicon-select" className="text-sm font-medium">
        Favicon
      </label>
      <select
        id="favicon-select"
        className="border rounded px-3 py-2 bg-background text-foreground"
        defaultValue={options[0].href}
        onChange={(e) => {
          const nextHref = e.target.value;
          const match = options.find((o) => o.href === nextHref);
          setFavicon(nextHref, match?.type);
        }}
      >
        {options.map((opt) => (
          <option key={opt.href} value={opt.href}>
            {opt.label}
          </option>
        ))}
      </select>
      <div className="text-xs text-foreground/60">
        Changes the page's favicon client-side without a reload.
      </div>
    </div>
  );
}

Screen.Recording.2025-08-28.at.00.56.30.mov

Using the icons in the public directory.

[InternetBowser670]

Thanks! I'll try and take a look.

[InternetBowser670]

I'm marking that as an answer and will keep it unless I have an issue.

[InternetBowser670]

Unfortunately, I have to reopen this discussion. The code did insert the link tag (<link rel="icon" data-dynamic-favicon="true" href="data:image/svg+xml;base64,PHN2Zy...c3ZnPg==">), but the original favicon (set with export const metadata: Metadata = { description: "[desc]", ..., icons: { icon: "/favicon.ico", }, };), still takes precedence, even after deleting the link tag with href="/favicon.ico".

I'm sorry to bother you.

[InternetBowser670]

Never mind, I fixed it by just removing the icon from the metadata object. Thanks for your help, @icyJoseph.