如何添加 favicon 以响应应用程序浏览器选项卡（重复）答案

【问题标题】：How to add favicon to react application browser tab (duplicate)如何添加 favicon 以响应应用程序浏览器选项卡（重复）
【发布时间】：2018-12-12 21:36:49
【问题描述】：

我是新来的反应。有人可以帮我添加 favicon 来响应应用程序。我已经创建了 favicon 包并将生成的代码添加到 index.html。但我不知道这个href 是如何指定favicon 的。

谢谢。

【问题讨论】：

【解决方案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

【讨论】：