admin 管理员组

文章数量: 1086019

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=".4.1/css/bootstrap.min.css"
          />
        </Head>

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

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

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./bootstrap/4.4.1/css/bootstrap.min.css"
          />
        </Head>

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

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

  • javascript
  • reactjs
  • next.js
  • favicon
Share Improve this question asked Mar 25, 2020 at 18:29 SoorajSooraj 10.6k12 gold badges67 silver badges103 bronze badges 2
  • please, check: stackoverflow./questions/56213019/… – manelescuer Commented Mar 25, 2020 at 18:33
  • I'm following exactly as mentioned there in the updated answer. Hence the confusion. – Sooraj Commented Mar 25, 2020 at 19:19
Add a ment  | 

2 Answers 2

Reset to default 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" />

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

本文标签： javascriptAdding favicon in next js react projectStack Overflow

版权声明：本文标题：javascript - Adding favicon in next js react project - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744078493a2529794.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。