How to Add favicon.ico on Next.js 13 & Next.js 14

[clevermiraz]

Summary

I wanted to Add favicon.ico on my website how can i do that

Additional information

No response

Example

No response

[devjiwonchoi]

Edit

Everyone is getting confused, let me make this simple.

Convention

Place favicon.ico inside the app/ or public/ folder, which Next.js will auto-generate the necessary metadata.

.
├── app/
│   └── favicon.ico <-- here OR
└── public/
    └── favicon.ico <-- here

Else

Place the favicon file(s) on the public, then use Metadata or generateMedatada.

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

You can also change favicon by color scheme:

icons: {
  icon: [
    {
      url: '/light-icon.png',
      media: '(prefers-color-scheme: light)',
    },
    {
      url: '/dark-icon.png',
      media: '(prefers-color-scheme: dark)',
    },
  ],
},

Reference

• generateMetadata#icons

[Marius9595]

Thanks, I used the convention one.

Important! Your file has to be named as favicon.ico otherwise :D

[StackOverflowIsBetterThanAnyAI]

Thanks, I used the method you labelled 'else'. Don't forget to use the correct name of your icon (favicon.ico).

[charlie763]

I have put my favicon in the root app directory, and it keeps getting overwritten with the default next favicon whenever I run npm run build. Perhaps because I have a custom static export config? -

const nextConfig = {
  assetPrefix: '/lp', // This prepends /lp to any hrefs in the static content
  basePath: '/lp', // This prepends /lp to the path for local development 
  distDir: 'out/lp', // This makes sure static content is exported to /out/lp
  output: 'export', // DO NOT CHANGE THIS - this ensures the site is static
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

any thoughts @devjiwonchoi ?

[atlamors]

Hey @charlie763 I just ran into the same issue.

I was able to resolve it by moving the favicon into the /public/ dir and deleting all other copies of it.

Hope this helps you.

[victornasar]

@atlamors same here. I was struggling with this for an hour! I didn't even think about moving it to the public folder.

[clevermiraz]

Yup Just Put favicon.ico on root of app directory. Next js will autometically detect what to do.

thanks @devjiwonchoi

[ChristophHandschuh]

keep in mind that the favicon is cached. When you dont see it make an request to the url of the favicon and it should appear

[amitsuthar69]

You saved me hours man! Just a hard refresh was all I needed.

[viktoriabakun]

@ChristophHandschuh thank you!

GUYS, HARD RELOAD!

[lumenwrites]

I want to put my favicon.ico into a different directory. How can I customize that?

[clevermiraz]

then put favicon.ico in public directory. Then Try a shit.

and you can access by

<link rel="icon" type="image/x-icon" href="./favicon.ico">

[wadakatu]

@lumenwrites @CMCDragonkai

Hi.
I managed to create link tag of favicon with Metadata API.
I believe you can do it even though your favicon file is in the public folder.

The successful code is something like below.

import Favicon from '/public/images/Metadata/favicon.ico';

export const metadata: Metadata = {
  title: 'Next.js',
  description: 'Generated by create next app',
  icons: [{ rel: 'icon', url: Favicon.src }],
};

Hope it helps.

[ileys-admin]

Only thing that worked, this is way to unneccesarily difficult, the entire point of why it wasnt showing up was because i was creating a mutilingual site whose root is at [lang] so it never really ever finds the favicon at the root cuz its always redirected. and I followed that example directly from the nextjs website

also I just realized how stupid I was and anyone who is going through my same issue do the above or modify the config matchter inside the middleware to exclude the favicon.ico which nextjs automatically detects
export const config = { matcher: [ // Skip all internal paths (_next) "/((?!api|_next/static|_next/image|favicon.ico).*)", // Optional: only run on root (/) URL // '/' ], };

[narutophuc113]

Only thing that worked for me.

I set up the internationalize and configed the matcher in middleware, but only this way worked.

[CarlosSousa2001]

Thanks !!

[Wellington-Matoss]

Thanks, man!!

[Vdcds]

Thanks, worked.

[Basovs]

Sometimes after putting the favicon.ico into /app or /public + "link" element you still need to reset the browser cache for the icon to be displayed. Try reset brower with cmd+q on at least, dont know how it works on Windows. Thats what helped me.

[ChrisHPZ]

On Chrome, we can hard reload by pressing the Ctrl and F5 keys together. This applies to Windows PC's. We can also open Chrome's console with the F12 key, then hold down on the Reload icon and click on "Clear Cache and Hard Reload" option

[ddkeating]

Thanks this worked for me!

[ShahAashka]

Worked for me as well. thanks @ChrisHPZ

[ChrisHPZ]

I just added an /app directory in my project root that contains a favicon.ico file. It just worked out of the box. I didn't need to import or set up any additional components.

[didiamuri]

Here is the solution that has a market for me :

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

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

source: https://stackoverflow.com/a/76412379/9487515

[jeevanlogiciel]

But ico files are larger in size as compared to png

[getFrontend]

In Next 14, just rename the favicon to icon and put it in the app folder.

Everything will automatically work the way it should! You don't need to look for other solutions anymore)

[Cnerd-Mahadi]

thanks man! exact answer I was looking for <3

[NicollasMelo]

Thanks man!

[ParvinEyvazov]

Thank you!

[devjiwonchoi]

public/ also works, name favicon.ico should be preserved.

[reinaldo-teixeira]

I was struggling with this problem on MacOs and this help me https://stackoverflow.com/a/76301605

[fabiofreitasbr]

With me the file don't working more with favicon in Vercel.

I using now app/ with name icon.ico

Reference: This Links

Using favicon.ico working in my first server, in news servers of clients my don't working!

I'm Brazilian!