Question 73482 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Adding Favicon to NextJs 13 Beta (No pages folder) – Reactjs

I have issue in new Next.js 13 beta. They removed head.js files and now (as it is written in doc) i have to use metadata in layout.ts. My favicon has name favicon.png.

How do i specify it here:

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

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    acctually this will be correct,

        export const metadata = {
        icons: {
            icon:'/_next/static/media/metadata/favicon.png',
        },
    };

    and then put you favicon image in that URL (_next/static/media/metadata).

    Login or Signup to reply.
  3. 0

    in layout.tsx

    export const metadata: Metadata = {
  icons: {
    icon: {
      url: "/favicon.png",
      type: "image/png",
    },
    shortcut: { url: "/favicon.png", type: "image/png" },
  },
};

    and in public I have a image called favicon.png

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search