Search code examples
next.jsfavicon

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?

Solution

  • 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 :

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