Favicons Webpack Plugin

6.0.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module not found: Error: Can't resolve 'favicons' in '/path/to/project' ↓

cause Missing required peer dependency 'favicons'.

fix

Run 'npm install --save-dev favicons@^7.0.1'.

error TypeError: Cannot read properties of undefined (reading 'tapAsync') ↓

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

error FaviconsWebpackPlugin is not a constructor ↓

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

Warnings

breaking Version 6.0.0 dropped support for Node < 16 and webpack < 5. ↓

fix Upgrade Node to >=16 and webpack to >=5.

deprecated Version 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.

gotcha The 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.

gotcha When 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.

gotcha The 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.

Install

npm install favicons-webpack-plugin

yarn add favicons-webpack-plugin

pnpm add favicons-webpack-plugin

Imports

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

wrong

import { FaviconsWebpackPlugin } from 'favicons-webpack-plugin'

correct

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.

Quickstart

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