Adding Favicon to NextJs 13 Beta (No pages folder)

Question

I have an issue with the 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',
 }

Raghav Sharma · Answer 1 · 2023-07-25T07:26:24.270

22

This is the simplest way to use Favicon in the Next.js 13.4 Stable version.

You need to convert your jpg, png, or SVG to .ico. It takes only a few seconds.
Rename your .ico file to icon.ico and paste it into the app folder and remove the favicon.ico from the app folder

Done

edited Jul 25 '23 at 07:26

answered Jun 06 '23 at 07:37

Raghav Sharma

284
1
5

2

This is the only solution that worked! Thanks a lot – AmeeraJ Jul 15 '23 at 15:54
1

I really appreciate your solution - it's the only one that worked! Thank you so much! – omid payandeh Jul 21 '23 at 15:24

score 16 · Accepted Answer · answered Mar 08 '23 at 16:07

16

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

answered Mar 08 '23 at 16:07

Jairo Py

615
6
12

1

You'll also need to add icon.jpg to /public. – cwalvoort Mar 08 '23 at 16:41
I want sizes too..... something like this `` how can i achieve this? – UNRIVALLEDKING May 05 '23 at 18:17
1

@UNRIVALLEDKING check out my answer (https://stackoverflow.com/a/76059232/9608615) and see if it helps – Wani May 21 '23 at 19:35
1

important to note that the name of the favicon has to be "icon" – Aleks Jun 07 '23 at 15:02

score 7 · Answer 3 · answered May 21 '23 at 19:33

7

To add multiple icons and add other attributes like type and sizes:

// layout.tsx
    
export const metadata: Metadata = {
  ...,
  icons: [
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      url: '/favicon/favicon-32x32.png',
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      url: '/favicon/favicon-16x16.png',
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      url: '/favicon/apple-touch-icon.png',
    },
  ],
}

answered May 21 '23 at 19:33

Wani

278
3
8

thanks it does add sizes attribute but it sets all rel to icons like here is my code ```icons: [ {rel: "icon",type: "image/png",sizes: "32x32",url: "/favicon.png",}, {rel: "apple-touch-icon",type: "image/png",sizes: "180x180",url: "/favicon.png",}, {rel: "shortcut icon",type: "image/png",url: "/favicon.png",},],``` and here is what i got in chrome `````` – UNRIVALLEDKING May 23 '23 at 17:58
how would you handle for toggling browser theme from light to dark? – Hyetigran Aug 16 '23 at 20:23

score 4 · Answer 4 · answered Mar 22 '23 at 20:56

4

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).

answered Mar 22 '23 at 20:56

devchitect

41
1

score 3 · Answer 5 · answered May 30 '23 at 16:56

Based on docs here, adding link in RootLayout will also work

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        {children}
      </body>
    </html>
  );
}

score 2 · Answer 6 · answered Jun 29 '23 at 13:55

// app/layout.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    icon: ['/favicon.ico?v=4'],
    apple: ['/apple-touch-icon.png?v=4'],
    shortcut: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
};

// public/
//    |- ...
//    |- android-chrome-192x192.png
//    |- android-chrome-512x512.png
//    |- apple-touch-icon.png
//    |- favicon-16x16.png
//    |- favicon-32x32.png
//    |- favicon.ico
//    |- site.webmanifest
//    |- ...

Icon Convertor: https://favicon.io/favicon-converter/

score 0 · Answer 7 · answered Apr 19 '23 at 22:22

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

answered Apr 19 '23 at 22:22

mateus Amaral

21
1

score 0 · Answer 8 · answered May 28 '23 at 09:53

To me, the only method that worked is here.

This example is from the kapeesa gaming platform

Rename your icon file name to favicon.ico

e.g mine was kapeesa.png which I renamed to favicon.ico

Put your favicon.ico file in the src/app/ directory.

You usually have to replace the one you find in this path src/app/

That's it. It'll be used, fingerprinted, kabam.

score 0 · Answer 9 · answered May 29 '23 at 13:51

0

Step One: Delete the favicon.ico from root(app) directory.

Step Two: Place your icon in the root(app) directory like (app/icon.svg) app/icon.png, app/icon.jpg.

answered May 29 '23 at 13:51

Abdus Salam

1

score 0 · Answer 10 · answered Jul 04 '23 at 08:33

0

just put your favicon.ico in the root of src/app/ or app/ directory if still not working rename favicon to icon

answered Jul 04 '23 at 08:33

Wildan Maulana

62
1
1
8

Adding Favicon to NextJs 13 Beta (No pages folder)

10 Answers10

Linked

Related