[SOLVED] Assets within public directory give 404 errors in Next.js App

Assets within public directory give 404 errors in Next.js App

I have been trying to get the favicon for my site (uses Next.js) to show up. After going through countless Stack Overflow posts and tutorials, I am starting to get frustrated. My project's structure, and specifically the public directory looks like this:

.
├── Dockerfile
├── README.md
├── components
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── css
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── mstile-150x150.png
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
└── utils

The beginning of my app.js file looks like this:

export default function Layout({ children, page }) {
  return (
    <>
      <Head>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
        .....
      </Head>

After following this tutorial, I am left with console errors that read: GET http://localhost:3000/favicon-32x32.png 404 (Not Found). I also tried to load the favicons through a site.webmanifest file linked in the Head with <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials"> but this tag also left a 404 (Not Found) error in the console.

I have verified that the favicon png's are the correct size, 16x16 & 32x32. It seems that any assets living in my public directory that I am trying to link to in the <Head> are not being found.

Is there anything else that I can try to get these favicons showing up?

Edit: Here are the contents of my next.config.js file:

module.exports = {
  basePath: '/my-path',

  webpack: (config) => {
    return config
  },

  env: {
  },

  publicRuntimeConfig: {
    BACKEND_API_URL: ...
    CONSENT_COOKIE_NAME: ...
  },
}

Solution

Because you've set your basePath to /my-path in your next.config.js, you'll need to include that in your other path references as well, e.g.:

<link rel="icon" type="image/png" sizes="32x32" href="/my-path/favicon-32x32.png" />