响应应用程序的图标不起作用答案

【问题标题】：favicon to react application doesn't work响应应用程序的图标不起作用
【发布时间】：2018-12-11 16:13:45
【问题描述】：

我想在我的 react 应用程序中添加一个网站图标，但它似乎不起作用。

尝试了以下方法：将代码添加到head部分的index.html文件中

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="manifest" href="/site.webmanifest">

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="msapplication-TileColor" content="#ffc40d">

<meta name="theme-color" content="#ffffff">

还将图标放在与 index.html 相同的文件夹中。你能否让我知道问题仍然存在。

谢谢。

【问题讨论】：

对于 favicon 尝试使用 ico 文件而不是 png
How to add a browser tab icon (favicon) for a website?的可能重复
Add Favicon with React and Webpack的可能重复
构建应用程序后文件夹中的图标是否存在？您是否收到控制台错误提示找不到图标？
我在控制台上没有看到任何错误...为了测试它是否真的有效，我将 ico 文件和其他 .png 文件放在与 index.html 文件相同的位置。所以目录结构是 folder->app->index.hml 和 favicon.ico

标签： reactjs

【解决方案1】：

记得将%PUBLIC_URL%添加到index.html中的所有href属性

例如；

<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">

这应该可以解决您的问题。

【讨论】：

URIError: Failed to decode param '/%PUBLIC_URL%/favicon-32x32.png 这是我在控制台中遇到的错误。
%PUBLIC_URL%前面没有“/”