title: Favicon implementation with react js
body: <p>I have been trying to get the favicon to work with a react js app, but it looks like the process is complicated. I do have a <code>favicon.png</code> inside of <code>src/images</code>. Please see image:</p>
  
  <p><a href="https://i.stack.imgur.com/Tsngj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tsngj.png" alt="enter image description here"></a></p>
  
  <p>And it is declared in my <code>index.html</code> as: </p>
  
  <pre><code>&lt;link rel="shortcut icon" type="image/png" href="${require('./src/images/favicon.png')}"/&gt;
  </code></pre>
  
  <p>I have also tried adding the following to my config.json file as:</p>
  
  <pre><code>  new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        favicon: './src/images/favicon-16x16.png'
      })
  </code></pre>
  
  <p>None of the above works, and I am wondering if I am missing something?</p>
  
  <p>My Webpack Config Code:</p>
  
  <pre><code>   const path = require('path');
  const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const Dotenv = require('dotenv-webpack');
  const RobotsPlugin = require('@tanepiper/robots-webpack-plugin');
  
  // The extract text plugin moves all the required *.css modules in entry chunks into a
  // separate CSS file. So your styles are no longer inlined into the JS bundle, but in a
  // separate CSS file. (https://webpack.js.org/plugins/extract-text-webpack-plugin/#usage)
  const extractSass = new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      disable: process.env.NODE_ENV === 'development',
  });
  
  module.exports = {
    entry: {
      // Babel Polyfill will emulate a full ES2015+ environment and is intended to be used in an
      // application rather than a library/tool.
      index: ['babel-polyfill', './src/index.js'],
    },
    target: 'web',
    output: {
      filename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist'),
    },
    // Loaders. Webpack uses a regular expression to determine which files it should look for
    // and serve to a specific loader.
    module: {
      rules: [
        {
          test: /\.(html)$/,
          include: path.join(__dirname, 'public'),
          use: {
            loader: 'html-loader',
            options: {
              interpolate: true,
            },
          },
        },
        {
          test: /\.js$/,
          exclude: [/node_modules/],
          loader: 'babel-loader',
        },
        {
          test: /\.js$/,
          include: path.join(__dirname, 'psp247'),
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[path][name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.scss$/,
          use: extractSass.extract({
            use: [
              {
                loader: 'css-loader',
              },
              {
                loader: 'sass-loader',
              },
            ],
            // use style-loader in development
            fallback: 'style-loader',
          }),
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: ['file-loader'],
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
              'file-loader',
          ],
      },
      ],
    },
    plugins: [
      new RobotsPlugin({
        userAgents: [{
          name: '*',
          disallow: ['/'],
                   }]
                       }),
      new Dotenv(),
      // Generates an HTML5 file based on the template provided, includes all your webpack bundles in
      // the body using script tags and styles on the head using a link tag.
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
      }),
      extractSass,
      /*         // It's also good practice to extract third-party libraries to a separate vendor chunk.
          new webpack.optimize.CommonsChunkPlugin({
              name: 'vendor',
          }),
          // Extract webpack's boilerplate and manifest which can change with every build.
          new webpack.optimize.CommonsChunkPlugin({
              name: 'runtime',
          }),
          // The CommonsChunkPlugin should remove duplicate dependencies and put those into a common chunk.
          new webpack.optimize.CommonsChunkPlugin({
              name: 'common', // Specify the common bundle's name.
          }), */
    ],
  };
  </code></pre>