Registry / devops / favicons-webpack-plugin

favicons-webpack-plugin

JSON →
library6.0.1jsnpmunverified

A webpack plugin that leverages the favicons library to automatically generate all favicon icons and HTML tags for your web app. Version 6.0.1 requires Node >= 16, webpack 5, favicons ^7.0.1, and ships TypeScript types. It produces up to 44 different icon formats for iOS, Android, Windows Phone, and desktop browsers from a single logo file. Differentiates by zero-config setup using a file named logo.png in the project root and tight integration with html-webpack-plugin for automatic HTML injection.

npm install favicons-webpack-plugin
INSTALL
IMPORT
SIG · FAVICONS-WEBPACK-P
F
favicons-webpack-plugin
devopsjavascriptv6.0.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

default (FaviconsWebpackPlugin)
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
This package is CommonJS-only; it does not provide an ESM export. Use require() for import.
FaviconsWebpackPlugin
import FaviconsWebpackPlugin from 'favicons-webpack-plugin'
import { FaviconsWebpackPlugin } from 'favicons-webpack-plugin'
The package uses a default export, not a named export. Named import will result in undefined.
FaviconsWebpackPlugin
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
In a TypeScript CJS context, you may need to use '= require(...)' syntax or adjust your tsconfig.

Shows a full webpack config using HtmlWebpackPlugin and FaviconsWebpackPlugin with custom options and icon set configuration.

// webpack.config.js (CommonJS) const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), new FaviconsWebpackPlugin({ logo: './src/logo.png', mode: 'webapp', // optional: 'webapp' | 'light' | 'auto' devMode: 'webapp', // optional: 'webapp' | 'light' | 'auto' for development favicons: { appName: 'My App', appDescription: 'My App Description', developerName: 'My Name', developerURL: 'https://example.com', background: '#fff', theme_color: '#fff', icons: { android: true, appleIcon: true, appleStartup: false, favicons: true, windows: true, yandex: false, }, }, }), ], };
Debug
Known issues
breakingVersion 6.0.0 dropped support for Node < 16 and webpack < 5.
fix
Upgrade Node to >=16 and webpack to >=5.
affects: >=6.0.0
deprecatedVersion 5.x and earlier required favicons peer dependency versions <7. Version 6 requires favicons ^7.0.1.
fix
Install favicons@^7.0.1 alongside the plugin.
affects: >=6.0.0
gotchaThe logo path resolution can be confusing. The plugin resolves relative paths to webpack's context (default: cwd), not the config file location. Using an absolute path is safest.
fix
Use path.resolve(__dirname, 'logo.png') or an absolute path for the logo option.
affects: *
gotchaWhen using the zero-config mode (no argument), the plugin expects a file named 'logo.png' in the webpack context root. If the file is not present, it will throw an error.
fix
Either provide an explicit logo path or ensure logo.png exists in the project root.
affects: *
gotchaThe plugin does not work with webpack-dev-server's inline mode if you modify the output path; generated HTML may reference wrong paths. Use publicPath setting accordingly.
fix
Set output.publicPath appropriately (e.g., '/') and configure the plugin's 'prefix' option if needed.
affects: *
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'favicons' in '/path/to/project'
Missing required peer dependency 'favicons'.
fix
Run 'npm install --save-dev favicons@^7.0.1'.
TypeError: Cannot read properties of undefined (reading 'tapAsync')
Using an incompatible version of webpack (e.g., webpack 4 with plugin v6).
fix
Update webpack to ^5.0.0 or downgrade plugin to v5.x.
FaviconsWebpackPlugin is not a constructor
Named import instead of default import in CommonJS or incorrect import syntax.
fix
Use `const FaviconsWebpackPlugin = require('favicons-webpack-plugin')` (no destructuring) or `import FaviconsWebpackPlugin from 'favicons-webpack-plugin'`.
Upgrade
Version history
6.0.1latest on npm
Audit
Dependencies
faviconsrequiredRequired peer dependency for generating all icon files and manifest.
webpackrequiredRequired peer dependency for webpack plugin ecosystem.
Agent activity
2 hits · last 30 days
node
2
Resources
favicons-webpack-plugin — npm install favicons-webpack-plugin · libregistry