Question

由于某种原因我的收藏夹无法正常工作。

我将图标收藏夹保存为/ avi目录中的favicon.ico，并在我页面的<Head>（位于/ pages目录中）中引用了它，但无济于事。

有人可以帮忙吗？

-

这是我的index.js代码：

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

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

Answer 1

我尝试了很多方法来解决这个问题，但最终对我有用的是将收藏夹图标放在公共目录内的图像目录中，并将其放在我的 _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>

Answer 2

可能是 .ico 图像创建不正确 - 可能是从 .png 在线转换而来。这将导致图像可以在浏览器和其他地方查看，但不能用作 favicon。

为了排除故障，请尝试使用 .png 代替 .ico，看看问题是否仍然存在。如果这解决了您的问题，请考虑使用专门针对 favicon 的转换器，即 https://favicon.io/favicon-converter/

就我而言，文件位于正确的位置 (/public/favicon.ico)，被正确引用 (href="/favicon.ico")，并在访问 http://localhost:3000/favicon.ico 时提供，但它没有显示在浏览器选项卡中，直到我重新转换它。

Answer 3

remove / from: /favicon.ico 如果格式 ico 有效，您的图像应该加载。如果它不起作用，请将 .ico 图像转换为 .png 或 .jpg。

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

Answer 4

使用最新的 Next.js，您不需要使用链接标签。只需将它放在您的 public 文件夹的根目录中，它就会自动放置在您的网站上

Answer 5

我遇到了和你一样的问题。看来有必要把图片文件放在/public/images/

一旦我这样做了，它就会正常工作。

为什么我的收藏夹图标无法在我的下一个js应用程序中运行？

5 个答案: