webpack-favicons

1.5.43 verified Sat Apr 25 auth: no javascript

Webpack 5 plugin that generates device- and browser-specific favicons from a source image using the itgalaxy/favicons module. Integrates with HtmlWebpackPlugin and CopyWebpackPlugin to inject <link> tags into HTML files. Current version 1.5.47, requires Node >=18.17.0, ESM-only since v1.3.0. Actively maintained with monthly releases. Key differentiator: native webpack 5 hooks, supports relative path customization via pattern options.

Common errors

error Error: Cannot find module 'favicons' ↓

cause Missing peer dependency 'favicons'.

fix

Run npm install --save-dev favicons.

error TypeError: WebpackFavicons is not a constructor ↓

cause Forgetting 'new' when instantiating the plugin.

fix

Use 'new WebpackFavicons({...})' in the plugins array.

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. → configuration.plugins[0] should be an instance of WebpackFavicons. ↓

cause Importing as named export instead of default.

fix

Change import to: const WebpackFavicons = require('webpack-favicons');

Warnings

breaking Node version requirement increased to >=18.17.0 in version 1.5.0. ↓

fix Upgrade Node.js to version 18.17.0 or higher.

breaking Version 1.3.0 updated favicons dependency to ESM-only (7.x), breaking CommonJS usage. ↓

fix Ensure your project supports ESM (set type: module in package.json) or use an older version (<=1.2.5) of webpack-favicons.

breaking Version 1.2.0 dropped Webpack 4 support; only Webpack 5 is supported. ↓

fix Use Webpack 5 or migrate to https://github.com/jantimon/favicons-webpack-plugin for Webpack 4.

deprecated The 'callback' option introduced in 1.3.4 is undocumented and may be removed in future versions. ↓

fix Avoid using the 'callback' option; rely on Webpack hooks instead.

gotcha If using HtmlWebpackPlugin, it must be instantiated before WebpackFavicons in the plugins array. ↓

fix Order plugins: [new HtmlWebpackPlugin(), new WebpackFavicons({...})]

Install

npm install webpack-favicons

yarn add webpack-favicons

pnpm add webpack-favicons

Imports

WebpackFavicons

wrong

import WebpackFavicons from 'webpack-favicons';

correct

const WebpackFavicons = require('webpack-favicons');

Package is CommonJS, not ESM. Use require().

WebpackFavicons

wrong

plugins: [WebpackFavicons({ src: 'favicon.svg' })]

correct

plugins: [new WebpackFavicons({ src: 'favicon.svg' })]

Must instantiate with 'new' as it is a class.

WebpackFavicons

wrong

const { WebpackFavicons } = require('webpack-favicons');

correct

const WebpackFavicons = require('webpack-favicons');

Default export, not named export.

Quickstart

Basic Webpack configuration using webpack-favicons with HtmlWebpackPlugin to generate and inject favicon links.

// webpack.config.js
const WebpackFavicons = require('webpack-favicons');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  output: {
    path: '/dist',
    publicPath: '/~media/',
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new WebpackFavicons({
      src: 'assets/favicon.svg',
      path: 'img',
      background: '#000',
      theme_color: '#000',
      icons: {
        favicons: true,
      },
    }),
  ],
};