'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 1:^[1]

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" />

Solution 2:^[2]

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />

I think favicon should be in ICO format. The favicon is supposed to be a set of 16x16, 32x32 and 48x48. If you use online favicon generator, they set the size automatically

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mark G
Solution 2	Yilmaz

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]