为啥我的 favicon 在我的下一个 js 应用程序中不起作用？
Posted
技术标签:
【中文标题】为啥我的 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（您在上面输入谷歌查询的那个栏）。要确定浏览器是否将其识别为网站图标，您可以检查它是否显示在页面选项卡中。
【参考方案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 我更新了解决方案希望这有帮助以上是关于为啥我的 favicon 在我的下一个 js 应用程序中不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
所以我尝试在我的gatsby-config.js文件中添加gatsby-plugin-favicon