I'm attempting to change favicons based on environments so that users know if they are on `dev`, `stage`, or `prod`.

Tutorials such as [this one](https://reactgo.com/react-change-favicon-dynamically/) and [this one](https://www.geeksforgeeks.org/how-to-change-favicon-dynamically/) usually show how to change favicons based on button push callbacks, and not by accessing `env` variables.

The [react docs on custom env variables](https://create-react-app.dev/docs/adding-custom-environment-variables/) make it seem like this is achievable, but I'm not sure how to access the `env` variables in the `index.html` properly to conditionally change my favicon.

Below is my current attempt

```
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/app-icon.svg" id="favicon" />
 ...
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <script>

    //returns Uncaught ReferenceError: REACT_APP_APP_ENV is not defined
    console.log(REACT_APP_APP_ENV);
    //returns nothing
    console.log(PUBLIC_URL);
    //returns nothing
    console.log(process.REACT_APP_APP_ENV === 'dev' ? 'yep!' : 'nope!');
    //returns nothing
    console.log(process.PUBLIC_URL)

    const getFaviconEl = () => {
      return document.getElementById("favicon");
    }

    const getFaviconByEnv = (env) => {
      const favicon = getFaviconEl();
      switch (env) {
        case 'dev':
          favicon.href = "%PUBLIC_URL%/app-icon.svg"
        case 'prod':
          favicon.href = "%PUBLIC_URL%/app-icon-prod.svg"
        case 'stage':
          favicon.href = "%PUBLIC_URL%/app-icon-stage.svg"
        default:
          "%PUBLIC_URL%/app-icon.svg";
      }
    };
    getFaviconByEnv(process.REACT_APP_APP_ENV)
  </script>
  ...
</head>

```