Best Practice for Switching Favicon Based on Theme in Next.js w. App Router

[ciruz]

Hey,

I'm working on implementing dynamic favicons in a Next.js application that change based on the user's selected theme (light or dark mode). Currently, we are utilizing next-themes for theme management (ofc on the Client Side). With the introduction of the App Router and the new Metadata API in Next.js, I'm finding it challenging to integrate dynamic favicon changes.

Has anyone successfully implemented this with the App Router and Metadata API? If so, could you share your approach or suggest potential solutions? Any examples or guidance would be greatly appreciated.

Thank you in advance for your help!

[alex-streza]

I managed to get something working that may prove useful.

It's not a clean solution at all but seems to work, keep in mind to add "use client" and nest it within the ThemeProvider. The getColor util I use to grab the color part of my theme which is made up of font + color.

const Favicons = () => {
	const { theme } = useTheme();

	const color = getColor(theme);

	useEffect(() => {
		let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']");
		if (!link) {
			link = document.createElement("link");
			link.rel = "icon";
			document.head.appendChild(link);
		}
		link.href = `${env.NEXT_PUBLIC_URL}/favicon${color !== "light" ? `-${color}` : ""}.ico`;
	}, [color]);

	return <></>;
};

[adriangalilea]

In root layout.tsx

export const metadata = {
  title: “fooo",
  description: “bar",
  icons: {
    icon: [
      {
        url: "/icon-light.svg",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark.svg",
        media: "(prefers-color-scheme: dark)",
      },
    ],
  },
}

I solved it like this, hope it helps.

[ciruz]

What if we used 100% of our brain? 🧠 This is exactly the kind of answer I needed. Thanks!