How to add favicon to /dist?

Seems trivial but is difficult. How to add a favicon.ico to the npm run build task?

[ryangpts]

I only needed this:

In webpack.config.*.js files

new HtmlWebpackPlugin({   
    favicon: 'src/images/favicon.ico'

[jforaker]

Hmm that is one way. Here’s how I did it in case anyone lands on this thread:

1. require my favicon in my main App.js entry file require('../assets/images/favicon.ico')

2. Added a loader configuration that does not scramble the image file names in the build task (per this thread https://github.com/webpack/webpack/issues/1336#issuecomment-171363119)

         {
             test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
             loader: 'file-loader?name=[name].[ext]'  // <-- retain original file name
         }
   

3. Add the standard <link rel="shortcut icon" href="favicon.ico"> in src/index.html

Now npm run build will output the image/assets names as their original name, hence giving you the ability to href="favicon.ico" right in your index.html