网站图标未显示在React Application浏览器选项卡中

时间:2018-07-04 06:26:14

标签: reactjs webpack favicon

我想在我的React应用程序的浏览器选项卡中显示收藏夹图标。以下是我遵循的步骤: 1.生成收藏夹图标包,下载并复制所有收藏夹图标到public / static / images文件夹。 2.我的index.html文件在公用文件夹之外。但public和index.html都位于同一文件夹中。我在index.html文件的头部添加了以下几行。

 <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:无法解码参数'/%PUBLIC_URL%/favicon-32x32.png'”,并且在浏览器选项卡中我看到了当我单击控制台错误以获取更多信息时,此http://localhost:3000/%PUBLIC_URL%/favicon-32x32.png

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

编辑:也使用webpack。所以我需要在webpack-config.js文件中进行一些更改吗?如果可以的话,有人可以对此提供一些见解。谢谢。

0 个答案:

没有答案