Next.js Discord

Discord Forum

Multiple Favicons in Next 14q

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
hi guys,
Upgrading from next 12 where i had one favicon to 14, where i want 3

i want to dynamically change the favicon based on the envirnment

So i understand i have to move the favicon to the /app directory
but it only works if i call it favicon.ico - is there away to have a favicon-dev.ico and favicon-prod.ico and change them based on NODE_ENV?
Answered by Cape lion
in /pages/_app.tsx 
    <Head>
      <link rel="icon" href={getFaviconLink(session)} />
    </Head>
View full answer

35 Replies

sourab
Hey @Cape lion you can use icon standalone https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#icon
Cape lionOP
hey @sourab im reading that but i dotn really understand
<link rel="icon" href={/icon1.png} type="image" sizes="any" /> doesn't appear to work
for example
(backtics in the href)
took off the backticks, still doesnt work
<link rel="icon" href="/icon1.png" type="image" sizes="any" />
the only way it works is if i have a favicon.ico file
and then it ignores the link tag
sourab
Will send some examples in few minutes
Cape lionOP
🔥
that would be awesome
sourab
Here is the root layout.ts file

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
  icons: {
    icon:
      process.env.NODE_ENV !== "development"
        ? "https://realfavicongenerator.net/homepage_icons/browsers/chrome_2x.png"
        : "https://realfavicongenerator.net/homepage_icons/browsers/ie_2x.png",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
this works exactly you want
here is the docmentation of this approach
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Hope it helps Caio!
Cape lionOP
hi @sourab thanks this is interesting. where does it go?
in app/layout.js?
does it work if all my other pages are in the /pages directory?
sourab
Yes in layout.js
I haven't checked for pages directory actually. This only works for app router. Try testing you never know
Cape lionOP
im testing it works!
i think
something works
changed a bunch of things :lolsob:
Cape lionOP
it worked @sourab ! thanks
or a variant on that anyway
🙂
the documetnation is misleading
cause if you're using the pages idrectory it should use the pages director
sourab
Right makes sense and actually this example is only for app router so maybe. Anyways good solve!
Cape lionOP
👍
you figure out your env in drupal thing?
sourab
Yes just discussing with my team. But still thanks for the help
Cape lionOP
in /pages/_app.tsx 
    <Head>
      <link rel="icon" href={getFaviconLink(session)} />
    </Head>
Answer