javascriptreactjsnext.jsnext.js13

Adding Favicon to NextJs App router application

I have an issue with the new Next.js App Router. They removed head.js files and now (as it is written in the doc) I have to use metadata in layout.ts. My favicon name is favicon.png.

How do i specify it here:

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
Solution

  • You can do it as follow:

    export const metadata = {
  icons: {
    icon: '/icon.png',
  },
};

    The output will be

    <link rel="icon" href="/icon.png" />

    See all documentation regarding icons metadata:

    https://beta.nextjs.org/docs/api-reference/metadata#icons