Search code examples
reactjsnext.jsfrontendnextjs14

Removing updating Favicon.ico in Nextjs 14+

I'm working on a Next.js 14 project and I'm trying to update the default favicon from my application. I can't seem to update the favicon as it is not accepting any other favicon than the default in the layout.js file there is metadata my HTML page is only accepting that data and no other data so even if I add a new head it is not showing anything.

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

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

export const metadata = {
  title: "Create Next App",
  description: "Generated by creating next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

I have tried deleting the metadata component and directly applying head in layout.js RootLayout but no result has been shown please help me as I am new to Nextjs 14 and I can't seem to find the exact solution to the problem even in documents

Solution

  • Assuming you are using the App Router, you can either add a file as described in https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#favicon

    Or put it correctly in the Metadata object, see https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons and remove the file.

    Or add it directly to the <head> in the template but would need to delete the file then.