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

【问题标题】：Why is my favicon not working in my next js app?为什么我的 favicon 在我的下一个 js 应用程序中不起作用？
【发布时间】：2020-09-02 07:47:28
【问题描述】：

由于某种原因，我的网站图标无法正常工作。

我在 /public 目录中将网站图标保存为 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

【问题讨论】：

您是想在本地查看还是通过托管的在线服务查看？
我正在尝试在本地查看它。但是当我将它部署到 Vercel's Now 时它也不起作用
我会尝试将图标的相对路径替换为实际路径（本地），看看它是否在本地工作。还要添加类型属性type="image/x-icon"。
究竟是什么问题，无法通过 Web 服务器访问该图标，或者浏览器没有获取它并在预期的位置使用它？
要确定网站图标是否可访问，您可以尝试在浏览器中加载它。在地址栏中输入 URL（您在上面输入谷歌查询的那个栏）。要确定浏览器是否将其识别为网站图标，您可以检查它是否显示在页面选项卡中。

标签： html reactjs next.js favicon vercel

【解决方案1】：

将网站图标放在/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>

【讨论】：

我确认这一点。
这对我有用，我正在从下一个 js 版本 8 迁移到 11，这很有效。
为什么这是必要的？它解决了我的问题，但是我注意到 Next.js 样板项目没有这样做，它似乎在那里工作......

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

从/favicon.ico 中删除/，如果ico 格式有效，则应加载您的图像。如果它不起作用，请将.ico 图像转换为.png 或.jpg。

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

【讨论】：

【解决方案5】：

仅当您在使用下一个 basePath 时遇到问题时才有帮助：

我遇到了我的网站图标没有显示的问题。就我而言，这是因为我在下一个配置中使用了basePath: '/some-base-path'。当您添加 basePath 时，它会更改静态资产的路径。

示例：/test 的 basePath 与 public/favicon.ico 的图像可以在 /test/public/favicon.ico 引用

调试说明：我还必须清除缓存才能看到更改（或尝试隐身）。

【讨论】：

【解决方案6】：

将 favicon 放在 public 文件夹的根目录中，然后在 next/head 标记中添加 favicon。

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

【讨论】：

@Rainning 我更新了解决方案希望这有帮助