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

Question

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

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

Answer 1

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

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

Answer 2

要让 favicon.ico 被浏览器用作默认 favicon，它需要在没有 parcel.js 生成的散列的情况下出现。为此，您必须 not 将其包含在任何地方，因为 parcel 将生成带有哈希的文件，即 favicon.f76ab27.ico.

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

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

The trick is to not define a staticPath. Parcel will then copy the files to the root folder. All copied files will not have a hash appended.

Answer 3

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

这个插件会将static/下的所有文件复制到dist/根目录下，所以这个对robots.txt、humans.txt、browserconfig.xml也很有用以及按照惯例应位于网站根目录但可能未在任何地方明确引用的任何其他文件。

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

How to add a favicon to a static webpage made using parcel.js?

favicon

parceljs