next14: I can't see my favicon.ico, Although I set public and metaData

export const metadata: Metadata = {
  title: "title",
  description: "description",
  icons: {
    icon: "/favicon.ico",
  },
};

This is /app/layout.tsx. this is globalLayout file.

I use app router. there is the favicon.ico in the public.

<link rel="icon" href="/favicon.ico">

I can find this tag in of my next project. If I open this link(href), I can see my favicon.ico.

But this is not working. I see default icon in my browser. Why this is happen?

My favicon.ico is 32x32. Is this too small?

Problem :

I can't see my favicon.ico, Although I set public and metaData

Possible Cause :

• favicon.ico location, favicon image should only be located in the top level of app/, means inside app folder directly not under any folder in app.

Possible Solution :

Change favicon location, Then clear browser history(everything cache, website settings etc.) & reopen your page.

app
├── favicon.ico

(Please 1st take full project backup for safety before deleting .next folder) If still not visible then, stop server & delete .next folder.

Please Read :

• favicon : https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#favicon

• Image files (.ico, .jpg, .png) Locations : https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png

• Metadata File Conventions : https://nextjs.org/docs/getting-started/project-structure#metadata-file-conventions

If you have any doubts, then please leave a comment (I will update answer if necessary)