Next.js Discord

Discord Forum

Dark Mode Favicon support, does `media=(...)` work with server rendered root layouts?

Unanswered
Cinnamon posted this in #help-forum
Open in Discord
CinnamonOP
I have the following code to use different favicons for light & dark mode but its not working in dev or when deployed to prod on vercel. 

<link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="alternate icon" href="/favicon-white.ico" sizes="any" media="(prefers-color-scheme: dark)" />


I checked the rendered html, both <link> elements are there.

I'm on "next": "14.2.3",
layout: src/app/layout.tsx

1 Reply

Sun bear
you can create a separate favicon for dark theme and do some conditional rendering like this:

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