Responsive Favicons with Webpack and React

To add responsive favicons for React, there are two solutions:

Note: put all the icons in src/favicons folder in source code.

1. Add links in the template index.html file and copy icon resources to dist folder through Webpack plugin CopyWebpackPlugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  target: "web",
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    ...,
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new CopyWebpackPlugin([
      { from: path.resolve(__dirname, 'src/favicons/site.webmanifest') },
      { from: path.resolve(__dirname, 'src/favicons/browserconfig.xml') },
      { from: path.resolve(__dirname, 'src/favicons'), to: 'assets/icons' }
    ]),
    ...
  ]
};

2. use Webpack plugin FaviconsWebpackPlugin to generate different sizes of favicon for different platform and inject all the links into the template index.html

Pros: only need one svg favicon and add Webpack config
Cons: only support PWA(progressive web application), not support like safari-pinned-tab

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  target: "web",
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    ...,
    new FaviconsWebpackPlugin({
      logo: './src/favicons/favicon.svg',
      cache: false,
      mode: 'webapp',
      devMode: 'light',
      prefix: '[hash]/icons/',
      favicons: {
        background: 'black',
        theme_color: '#cc4cab',
        icons: {
            // Platform Options:
            // - offset - offset in percentage
            // - background:
            //   * false - use default
            //   * true - force use default, e.g. set background for Android icons
            //   * color - set background for the specified icons
            //   * mask - apply mask in order to create circle icon (applied by default for firefox). `boolean`
            //   * overlayGlow - apply glow effect after mask has been applied (applied by default for firefox). `boolean`
            //   * overlayShadow - apply drop shadow after mask has been applied .`boolean`
          android: true,               // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          appleIcon: true,             // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          appleStartup: true,          // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          coast: false,                // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          favicons: {
            mask: true,
            background: "red"
          },                           // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          firefox: true,               // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          windows: true,               // Create Windows 8 tiletile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          yandex: false                // Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
        }
      }
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    ...
  ]
};

References:

1. https://ts-react-boilerplate.js.org/docs/EXTRAS.html
2. favicons-webpack-plugin
3. html-webpack-plugin
4. favicons document