Angular multiple favicons depending on environment

Question

I recently moved to Angular 9 and I have multiple environments for production for my app, and each of them should set its own favicons, but I'm not sure how to do so.

I also want to set multiple favicons for all devices and sizes, so I have multiple files at once (favicon, favicon-16x16, favicon-32x32, etc.)

AFAIK I can't use variables in my index.html, so should I create one index per each env with its own favicons?

Also how can I change default favicon.ico with all these I have?

Answer 1

So I found out that I can set different assets for each build and exclude the folder which I'm moving, and I'm doing smth like:

{
  ...,
  "configurations": {
    "production.one": {
      ...,
      "assets": [
        {
          "glob": "**/*",
          "input": "src/assets/favicon/production_one",
          "output": "assets/favicon"
        },
        {
          "glob": "**/*",
          "input": "src/assets",
          "output": "assets",
          "ignore": ["favicon/**/*"]
        }
      ]
    }
  },
  ...
}