title: Change favicon based on environment (dev, stage, or prod) in React
body: <p>I'm attempting to change favicons based on environments so that users know if they are on <code>dev</code>, <code>stage</code>, or <code>prod</code>.</p>
  <p>Tutorials such as <a href="https://reactgo.com/react-change-favicon-dynamically/" rel="nofollow noreferrer">this one</a> and <a href="https://www.geeksforgeeks.org/how-to-change-favicon-dynamically/" rel="nofollow noreferrer">this one</a> usually show how to change favicons based on button push callbacks, and not by accessing <code>env</code> variables.</p>
  <p>The <a href="https://create-react-app.dev/docs/adding-custom-environment-variables/" rel="nofollow noreferrer">react docs on custom env variables</a> make it seem like this is achievable, but I'm not sure how to access the <code>env</code> variables in the <code>index.html</code> properly to  conditionally change my favicon.</p>
  <p>Below is my current attempt</p>
  <pre><code>&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/app-icon.svg&quot; id=&quot;favicon&quot; /&gt;
   ...
    &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot; /&gt;
    &lt;script&gt;
  
      //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 = () =&gt; {
        return document.getElementById(&quot;favicon&quot;);
      }
  
      const getFaviconByEnv = (env) =&gt; {
        const favicon = getFaviconEl();
        switch (env) {
          case 'dev':
            favicon.href = &quot;%PUBLIC_URL%/app-icon.svg&quot;
          case 'prod':
            favicon.href = &quot;%PUBLIC_URL%/app-icon-prod.svg&quot;
          case 'stage':
            favicon.href = &quot;%PUBLIC_URL%/app-icon-stage.svg&quot;
          default:
            &quot;%PUBLIC_URL%/app-icon.svg&quot;;
        }
      };
      getFaviconByEnv(process.REACT_APP_APP_ENV)
    &lt;/script&gt;
    ...
  &lt;/head&gt;
  </code></pre>