如何将网站图标添加到使用 parcel.js 制作的静态网页？答案

【问题标题】：How to add a favicon to a static webpage made using parcel.js?如何将网站图标添加到使用 parcel.js 制作的静态网页？
【发布时间】：2020-10-22 21:49:04
【问题描述】：

我正在使用 parcel.js 构建一个基本的静态网站（所以只有 HTML、CSS 和前端 JS，但 node / npm / parcel.js 用于构建）。

我想设置一个网站图标。最好/最简单的方法是什么？

【问题讨论】：

【解决方案1】：

在您的 html 文件中的 <head> 标记处，您可以使用

<link rel="shortcut icon" href="favicon.ico" />

【讨论】：

【解决方案2】：

要拥有一个将被浏览器用作默认图标的favicon.ico，它需要在没有parcel.js 生成的哈希的情况下存在。为此，您必须不将它包含在任何地方，因为 parcel 将生成带有哈希的文件，即favicon.f76ab27.ico。

为此尝试parcel-plugin-static-files-copy。它将文件从一个或多个目录复制到dist。在package.json 中尝试以下设置：

{
  "staticFiles": {
    "staticPath": [
      {
        "staticPath": "path/to/static/files",
        "watcherGlob": "**"
      }
    ]
  },
}

诀窍是不定义staticPath。 Parcel 然后会将文件复制到 root 文件夹。所有复制的文件将不附加哈希。

【讨论】：

【解决方案3】：

您可能需要添加 parcel-plugin-robot plugin 并将 favicon.ico 文件添加到 static/ 目录。

此插件会将static/ 下的所有文件复制到根dist/ 目录，因此这对于robots.txt、human.txt、browserconfig.xml 和网站根目录中预期的任何其他文件也很有用按照惯例，但可能不会在任何地方明确引用。

【讨论】：