{"id":20028,"library":"favicons-webpack-plugin","title":"Favicons Webpack Plugin","description":"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.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/jantimon/favicons-webpack-plugin","tags":["javascript","webpack","plugin","html-webpack-plugin","webapp","pwa","manifest","favicon","icon","typescript"],"install":[{"cmd":"npm install favicons-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add favicons-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add favicons-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for generating all icon files and manifest.","package":"favicons","optional":false},{"reason":"Required peer dependency for webpack plugin ecosystem.","package":"webpack","optional":false}],"imports":[{"note":"This package is CommonJS-only; it does not provide an ESM export. Use require() for import.","symbol":"default (FaviconsWebpackPlugin)","correct":"const FaviconsWebpackPlugin = require('favicons-webpack-plugin')"},{"note":"The package uses a default export, not a named export. Named import will result in undefined.","wrong":"import { FaviconsWebpackPlugin } from 'favicons-webpack-plugin'","symbol":"FaviconsWebpackPlugin","correct":"import FaviconsWebpackPlugin from 'favicons-webpack-plugin'"},{"note":"In a TypeScript CJS context, you may need to use '= require(...)' syntax or adjust your tsconfig.","symbol":"FaviconsWebpackPlugin","correct":"const FaviconsWebpackPlugin = require('favicons-webpack-plugin')"}],"quickstart":{"code":"// webpack.config.js (CommonJS)\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst FaviconsWebpackPlugin = require('favicons-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.html',\n    }),\n    new FaviconsWebpackPlugin({\n      logo: './src/logo.png',\n      mode: 'webapp', // optional: 'webapp' | 'light' | 'auto'\n      devMode: 'webapp', // optional: 'webapp' | 'light' | 'auto' for development\n      favicons: {\n        appName: 'My App',\n        appDescription: 'My App Description',\n        developerName: 'My Name',\n        developerURL: 'https://example.com',\n        background: '#fff',\n        theme_color: '#fff',\n        icons: {\n          android: true,\n          appleIcon: true,\n          appleStartup: false,\n          favicons: true,\n          windows: true,\n          yandex: false,\n        },\n      },\n    }),\n  ],\n};","lang":"javascript","description":"Shows a full webpack config using HtmlWebpackPlugin and FaviconsWebpackPlugin with custom options and icon set configuration."},"warnings":[{"fix":"Upgrade Node to >=16 and webpack to >=5.","message":"Version 6.0.0 dropped support for Node < 16 and webpack < 5.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Install favicons@^7.0.1 alongside the plugin.","message":"Version 5.x and earlier required favicons peer dependency versions <7. Version 6 requires favicons ^7.0.1.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Use path.resolve(__dirname, 'logo.png') or an absolute path for the logo option.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Either provide an explicit logo path or ensure logo.png exists in the project root.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Set output.publicPath appropriately (e.g., '/') and configure the plugin's 'prefix' option if needed.","message":"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.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev favicons@^7.0.1'.","cause":"Missing required peer dependency 'favicons'.","error":"Module not found: Error: Can't resolve 'favicons' in '/path/to/project'"},{"fix":"Update webpack to ^5.0.0 or downgrade plugin to v5.x.","cause":"Using an incompatible version of webpack (e.g., webpack 4 with plugin v6).","error":"TypeError: Cannot read properties of undefined (reading 'tapAsync')"},{"fix":"Use `const FaviconsWebpackPlugin = require('favicons-webpack-plugin')` (no destructuring) or `import FaviconsWebpackPlugin from 'favicons-webpack-plugin'`.","cause":"Named import instead of default import in CommonJS or incorrect import syntax.","error":"FaviconsWebpackPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}