如何添加 favicon 以响应应用程序浏览器选项卡（重复）
Posted
技术标签:
【中文标题】如何添加 favicon 以响应应用程序浏览器选项卡（重复）【英文标题】：How to add favicon to react application browser tab (duplicate) 【发布时间】：2018-12-12 21:36:49 【问题描述】：我是新来的反应。有人可以帮我添加 favicon 来响应应用程序。我已经创建了 favicon 包并将生成的代码添加到 index.html。但我不知道这个href 是如何指定favicon 的。
谢谢。
【问题讨论】：
Add Favicon with React and Webpack的可能重复 【参考方案1】：您可以将 favicon.ico 添加到 public/images 然后输入 index.html 并添加代码。
<link rel="shortcut icon" href="./images/favicon.ico">
【讨论】：
【参考方案2】：如果您有自己的图片，则只需将此行更改为您的图片地址
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
只需将 favicon.ico 更改为您的图片名称
<link rel="shortcut icon" href="%PUBLIC_URL%/coolImage.png">
【讨论】：
【参考方案3】：如果有人在 2021 年寻找。 将您的图像放在 Public 文件夹中，然后将以下图标更改为您在下一页上的图标。
/public/index.html
<link rel="icon" href="%PUBLIC_URL%/youricon.svg" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/youricon.svg" />
【讨论】：
【参考方案4】：将您的网站图标图像移动到公共文件夹中。 在 manifesto.json 中重命名网站图标的名称。 更新 index.html 中的链接
【讨论】：
【参考方案5】：只需在公共目录中使用 favicon.ico 重命名您的图像，它就会将该 img 作为您的 react 项目的 favicon 图标。
谢谢。
文件名更改为 favicon.ico
【讨论】：
以上是关于如何添加 favicon 以响应应用程序浏览器选项卡（重复）的主要内容，如果未能解决你的问题，请参考以下文章