I have been trying to get the favicon to work with a react js app, but it looks like the process is plicated. I do have a favicon.png inside of src/images. Please see image:

And it is declared in my index.html as:

<link rel="shortcut icon" type="image/png" href="${require('./src/images/favicon.png')}"/>

I have also tried adding the following to my config.json file as:

  new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: './src/images/favicon-16x16.png'
    })

None of the above works, and I am wondering if I am missing something?

My Webpack Config 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. ()
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 mon chunk.
        new webpack.optimize.CommonsChunkPlugin({
            name: 'mon', // Specify the mon bundle's name.
        }), */
  ],
};

I have been trying to get the favicon to work with a react js app, but it looks like the process is plicated. I do have a favicon.png inside of src/images. Please see image:

And it is declared in my index.html as:

<link rel="shortcut icon" type="image/png" href="${require('./src/images/favicon.png')}"/>

I have also tried adding the following to my config.json file as:

  new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: './src/images/favicon-16x16.png'
    })

None of the above works, and I am wondering if I am missing something?

My Webpack Config 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/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 mon chunk.
        new webpack.optimize.CommonsChunkPlugin({
            name: 'mon', // Specify the mon bundle's name.
        }), */
  ],
};

• javascript
• reactjs

• Have you tried this? <link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico”> source: medium./@jenniferdobak/… – m1k1o Commented Sep 6, 2019 at 16:16
• If your app was created using create-react-app then the favicon is, by default, in the public folder and @M1K1O (above) has the example of what that looks like %PUBLIC_URL%. In this default case, you can just replace the favicon.ico or change it to SVG, PNG or whatever. If the file type is not ICO, then modify the <link /> tag as needed. – daddygames Commented Sep 6, 2019 at 16:28

2 Answers 2

Change your favicon extension to .ico

And Change your link tag to this:

<link rel="icon" href="./src/images/favicon.ico" type="image/x-icon" />

Webpack is not needed here at all as your html file is static, and not generated using any code ( this is what i infer from the image you shared).

You also don't need require or any code to generate the href, just write the correct static url of the favicon.

Notice that however you have incorrect type, it should be like

<link rel="icon" href="Your-url-here" type="image/x-icon" />