reactjs - favicon 不显示在反应应用程序浏览器选项卡中

Question

我想在我的反应应用程序的浏览器选项卡中显示网站图标。以下是我执行此操作的步骤： 1. 生成 favicon 包，下载所有 favicon 并将其复制到 public/static/images 文件夹中。2. 我的 index.html 文件在 public 文件夹之外。但 public 和 index.html 都驻留在同一个文件夹中。我在 index.html 文件的 head 部分添加了以下行。

 <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch- 
 icon.png"> 
 <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon- 
 32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon- 
 16x16.png">
 <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
 <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" 
 color="#5bbad5">
 <meta name="theme-color" content="#ffffff">

我在浏览器中使用这个 url localhost:3000 运行应用程序，控制台给我错误“URIError: Failed to decode param '/%PUBLIC_URL%/favicon-32x32.png'”，在浏览器选项卡中我看到这个http： //localhost:3000/%PUBLIC_URL%/favicon-32x32.png当我单击控制台错误以获取更多信息时。

我在这里错过了一些步骤吗？有人可以帮我解决这个问题。我不知道如何进一步进行。谢谢。

编辑：也使用 webpack。那么我需要对 webpack-config.js 文件进行一些更改吗？如果是这样，有人可以对此提供一些见解。谢谢。

标签： reactjswebpackfavicon