Adding favicon in next js react project

user_3096546 0
Viewed 7063

I'm trying to add a favicon to a Next js project. The project was created using create-next-app.

I have a favicon.png in the public folder - Following the directions from static file serving here

In my Layout file I have below code:

       <Head>
          <title>{title}</title>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          <link rel="shortcut icon" href="../public/favicon.png" />
          <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          />
        </Head>

Layout file lives in a components directory and public is in the root.

However, the favicon is not showing up. What am I doing wrong?

next.js reactjs favicon javascript
2 Answers

The favicon is loaded by browser and not during build time. You should specify the webroot directory.

<link rel="icon" type="image/png" href="/favicon.png" />
user_59640230

In your example you do not need to move up a directory. Simply use /public instead of ../public.

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

user_46453650
Related