reactjs 为什么我的favicon在我的下一个js应用程序中不起作用？

kb5ga3dv 于 2022-11-04 发布在 React

关注(0)|答案(7)|浏览(215)

由于某种原因，我的图标不工作。
我将favicon保存为/public目录中的favicon.ico，并在我的页面（位于/pages目录中）的`<Head>`中引用它，但没有任何效果。
有人能帮忙吗？

下面是我的index.js的代码：

<Head>
      <title>Create Next App</title>
      <link rel="icon" href="/favicon.ico" />

dir/pages/index.js
dir/public/favicon.ico

reactjs

来源：https://stackoverflow.com/questions/61836949/why-is-my-favicon-not-working-in-my-next-js-app

7条答案

按热度按时间

vhmi4jdf1#

将favicons放在/public目录下的/image目录中，并将下面的代码放在您的_app.js中

<Head>
          <link rel="shortcut icon" href="/images/favicon.ico" />
          <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
          <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
</Head>

赞(0）回复(0）举报 2022-11-04

1cklez4t2#

.ico图像可能创建不正确-可能是从.png联机转换而来。这将导致该图像可以在浏览器和其他位置查看，但无法用作favicon。
为了排除故障，请尝试使用.png而不是.ico，并查看问题是否仍然存在。如果这样可以解决问题，请考虑使用专门针对favicons的转换器，即https://favicon.io/favicon-converter/
在我的例子中，文件在正确的位置（/public/favicon.ico），被正确地引用（href="/favicon.ico"），并且在访问http://localhost:3000/favicon.ico时被提供，但是直到我重新转换它，它才显示在浏览器选项卡中。

赞(0）回复(0）举报 2022-11-04

ig9co6j13#

我遇到了和你完全一样的问题。看起来有必要把图像文件放在/public/images/
一旦我这样做了，它就会正常工作。

赞(0）回复(0）举报 2022-11-04

0qx6xfy64#

仅当您在使用nextbasePath时遇到问题时才有帮助：
我遇到了一个问题，我的图标没有显示。在我的情况下，这是因为我在我的下一个配置使用basePath: '/some-base-path'。当你添加一个basePath，它改变了静态资产的路径。
示例：/test的basePath在public/favicon.ico处有一个图像，可以在/test/public/favicon.ico处引用
调试注意事项：我还必须清除缓存才能看到更改（或者尝试隐姓埋名）。

赞(0）回复(0）举报 2022-11-04

nbewdwxp5#

在我的例子中，**我在src/**目录中有public/。
我把它改成：

.
├── next.config.js
├── public
│   ├── favicon.ico
│   └── img
└── src
    ├── pages
    └── styles

（将public/移到根目录.）

赞(0）回复(0）举报 2022-11-04

ctrmrzij6#

从以下位置删除/：/favicon.ico和您的图像应该加载如果格式ico工作。如果它不工作，将.ico图像转换为.png或.jpg。

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

赞(0）回复(0）举报 2022-11-04

ffdz8vbo7#

我在创建图标时遇到了这个错误，结果发现我在type中输入了错误的图像格式！例如，我这样做了：

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

但由于格式不匹配，我不得不将image/png更改为image/x-icon。

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

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 为什么我的favicon在我的下一个js应用程序中不起作用？

由于某种原因，我的图标不工作。
我将favicon保存为/public目录中的favicon.ico，并在我的页面（位于/pages目录中）的`<Head>`中引用它，但没有任何效果。
有人能帮忙吗？

7条答案

相关问题

热门标签

最新问答

reactjs 为什么我的favicon在我的下一个js应用程序中不起作用？

由于某种原因，我的图标不工作。我将favicon保存为/public目录中的favicon.ico，并在我的页面（位于/pages目录中）的<Head>中引用它，但没有任何效果。有人能帮忙吗？

7条答案

相关问题

热门标签

最新问答

由于某种原因，我的图标不工作。
我将favicon保存为/public目录中的favicon.ico，并在我的页面（位于/pages目录中）的`<Head>`中引用它，但没有任何效果。
有人能帮忙吗？