Registry / devops / webpack-favicons

webpack-favicons

library1.5.43jsnpmunverified

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.

devops

npm install webpack-favicons

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-FAVICONS

webpack-favicons

devopsjavascriptv1.5.43

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebpackFavicons

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

✗ import WebpackFavicons from 'webpack-favicons';

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

WebpackFavicons

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

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

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

WebpackFavicons

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

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

Default export, not named export.

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, }, }), ], };

Debug

Known issues

breakingNode version requirement increased to >=18.17.0 in version 1.5.0.

fix

Upgrade Node.js to version 18.17.0 or higher.

affects: >=1.5.0

breakingVersion 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.

affects: >=1.3.0

breakingVersion 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.

affects: >=1.2.0

deprecatedThe '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.

affects: >=1.3.4

gotchaIf using HtmlWebpackPlugin, it must be instantiated before WebpackFavicons in the plugins array.

fix

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

affects: *

Errors

Common errors & fixes

Error: Cannot find module 'favicons'

Missing peer dependency 'favicons'.

fix

Run npm install --save-dev favicons.

TypeError: WebpackFavicons is not a constructor

Forgetting 'new' when instantiating the plugin.

fix

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

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.

Importing as named export instead of default.

fix

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

Upgrade

Version history

1.5.43latest on npm

Audit

Dependencies

faviconsrequiredCore favicon generation module (itgalaxy/favicons).

html-webpack-pluginoptionalOptional peer dependency for HTML tag injection (recommended).

Agent activity

26 hits · last 30 days

node

Resources

githubhttps://github.com/drolsen/webpack-favicons ↗

packagehttps://www.npmjs.com/package/webpack-favicons ↗