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

[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]

We can also use this in the main layout.tsx.

assume that we have logo in public directory

export const metadata = {
    title: "Khana Khazana",
    description: "The best food in town",
    icons: {
        icon: [
            {
                url: "/logo.svg", // /public path
                href: "/logo.svg", // /public path
            },
        ],
    },
};

[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!

[MdHasib01]

@viktoriabakun thanks a lot!!!

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

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

[Osvelsx]

This one worked for me.

Thanks friend, I was facing the same error but I just deployed to PD and now the icon is showing.

[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!

[Choi-Jiwon-38]

@devjiwonchoi
In Next.js version 14, when customizing the favicon under the app directory as favicon.ico, I encountered an issue where the transparent background of the .ico file was not applied.
Additionally, in the production environment via Vercel, the favicon was not applied at all. However, when I renamed the file to icon.ico, both the issue with the transparent background and the problem in the production environment were resolved.
The official documentation seems to recommend using favicon.ico, but why might these issues occur?

[devjiwonchoi]

Hey @Choi-Jiwon-38 Jiwon! 🙌
Could you open an issue with a reproduction?
Feel free to ping me on it and I'd happy to take a look. 😄

[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!

[paulenokels]

If your favicon is not in ico format. You can do this instead: <link rel="icon" type="image/x-icon" href="./favicon.svg" />

[Bamof25th]

Fixes which worked for me

• Just put favicon.iso in your root directory, and that works .
• Else just rename the favicon.ico on /app folder to icon.ico .

[didiamuri]

You can even use an svg icon by specifying it in the main layout in this way:

"next": "14.2.7",

And everything works fine.

[magrega]

Guys, how can I add an svg icon as a favicon? As per doc, I tried moving it into /app and /public directory with icon name of the file but it doesnt work. In network browser tab i have a 404 error for favicon.ico

in _document.tsx i have this:

import { Html, Main, NextScript } from 'next/document'
import Head from 'next/head'

export const metadata = {
	icons: {
		icon: '/favicon.svg'
	}
}

export default function Document() {
	return (
		<Html lang='ru'>
			<Head>
				<link rel='icon' href='/favicon.svg' />
				<meta name='apple-mobile-web-app-status-bar-style' content='#ff7652' />
			</Head>
			<body>
				<Main />
				<NextScript />
			</body>
		</Html>
	)
}

[didiamuri]

You can even use an svg icon by specifying it in the main layout in this way:

"next": "14.2.7",

And everything works fine.

[paras-verma7454]

Just delete the favicon.ico and paste your favicon in the app folder and rename your new favicon to favicon.ico
and it will work

[odilson-dev]

This was really helpful. Thank you❤️