How to add favicon in patternfly-react

Question

I'm trying to use patternfly-react for UI. I'm not sure how to add my favicon, normally in react we use

<link rel="icon" type="image/png" href="%PUBLIC_URL%/path/to/favicon.png">

But in patternfly-react we don't have any public folder and index.html is in src.

I tried <link rel="icon" type="image/png" href="favicon.png"> as my index.html file and favicon is in same folder i.e /src.

Here are the screenshots of my tree and index.html

Any help would be appreciated. Thanks in advance

Answer 1

I've found a solution to this problem.

Posting solution here just in case anyone having the same issue in the future.

Updated my webpack

plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'src', 'index.html'),
        favicon: path.resolve(__dirname, 'src', 'favicon.ico'),
      })
    ]

Added this favicon: path.resolve(__dirname, 'src', 'favicon.ico'), line in my webpack.common.js favicon.ico is in /src folder.

And it works.

Answer 2

The Patternfly react seed project solved this in a similar way that you did but they added a new plugin (CopyPlugin) to webpack instead of piggy-backing onto the HtmlWebpackPlugin