Search code examples
next.js

Next js cannot find favicon in public folder

I changed a little bit of the setup of my next.js project, and now it cannot find favicon.ico in public folder. My setup

enter image description here

in pages/_app.js

import "styles/globals.css";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  console.log("My app");
  return (
    <>
      <Head>
        <title>Test</title>
        <link rel="icon" type="image/x-icon" href="/images/favicon.ico" /> //doesnt find
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

but also I have jsconfig.json (I don't know if it has something to do with it)

{
 "compilerOptions": {
   "baseUrl": "./src"
 }
}

When I enter to localhost:3000/images/favicon.ico my icon is there.

Solution

  • As you mentioned, I would do a hard refresh (ctrl + shift + r) on the page. I have encountered similar issues in a vanilla JS project (with Vite) and this solves the issue.

    For whatever reason, it can pick up the favicon right away without a hard refresh if you reference the full file path directly (e.g., '/public/favicon.io') but the webpage has issues picking up just 'favicon.io' right away sometimes (even though that is the whole point of the public folder - those files are served at the root path).

    • Example from my code: <link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
    • Terminal message: files in the public directory are served at the root path. Instead of /public/favicon.ico, use /favicon.ico.