Adding favicon in next js react project

Question

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?

please, check: https://stackoverflow.com/questions/56213019/how-to-add-a-favicon-to-a-next-js-static-site — manelescuer, Mar 25 '20 at 18:33
I'm following exactly as mentioned there in the updated answer. Hence the confusion. — Sooraj, Mar 25 '20 at 19:19

Nikolai Kiselev · Answer 1 · 2020-03-27T16:16:52.870

4

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

edited Mar 27 '20 at 16:16

answered Mar 26 '20 at 12:36

Nikolai Kiselev

6,201
2
27
37

@Sooraj, what exactly error do you have? Does it say in a browser console/network tab that favicon is missing? I believe that if you `favicon.ico` in `/public` and you reference to it like `/favicon.ico` in the tag it will work. You can create a new project with `create-next-app` and the default scaffolding already has favicon included. However, I would assume that you don't see the favicon because it doesn't have type specified like `type="image/png"` – Nikolai Kiselev Mar 27 '20 at 16:14
@Sooraj, I've updated the answer, try to specify `type="image/png"` and let me know if you have any errors – Nikolai Kiselev Mar 27 '20 at 16:17

score 0 · Answer 2 · answered Apr 04 '20 at 20:24

0

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

answered Apr 04 '20 at 20:24

Pablo Rocha

530
4
9

Adding favicon in next js react project

2 Answers2