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

Question

I'm using parcel.js to build a basic static website (so HTML, CSS and front end JS only, but node / npm / parcel.js used for building).

I'd like to set a favicon. What's the best / simplest way to do this?

score 10 · Accepted Answer · edited Jan 20 '23 at 06:58

10

At your <head> tag at your html file you can use

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

edited Jan 20 '23 at 06:58

Mark Lopez

180
3
9

answered Jul 02 '20 at 10:51

John Arnok

594
4
11

This worked for me, also in IE11 and behind reverse proxies / virtual directories. favicon.ico can go in the route directory: parcel puts it to dist on building. – phhu Jul 03 '20 at 13:53
(root directory even!) – phhu Jul 11 '20 at 15:30

Fabian · Answer 2 · 2020-07-23T06:43:12.687

To have a favicon.ico that will be used as a default favicon by browsers, it needs to be present without the hash that parcel.js generates. For that, you would have to not include it anywhere as parcel will then generate the file with a hash, i.e. favicon.f76ab27.ico.

Try parcel-plugin-static-files-copy for this purpose. It copies files from one or more directories over to dist. Try the following settings in 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.

score 1 · Answer 3 · answered Aug 20 '20 at 23:34

You may want to add the parcel-plugin-robot plugin and add the favicon.ico file to the static/ directory.

This plugin will copy all files under static/ to the root dist/ directory, so this is also useful for robots.txt, humans.txt, browserconfig.xml and any other files that are expected at a website root directory by convention but that might not be referenced explicitly anywhere.

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

3 Answers3