{"id":20762,"library":"webpack-favicons","title":"webpack-favicons","description":"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.","status":"active","version":"1.5.43","language":"javascript","source_language":"en","source_url":"https://github.com/drolsen/webpack-favicons","tags":["javascript","webpack","favicon","favicons","webpack favicon","webpack html favicon","webpack favicons"],"install":[{"cmd":"npm install webpack-favicons","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-favicons","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-favicons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core favicon generation module (itgalaxy/favicons).","package":"favicons","optional":false},{"reason":"Optional peer dependency for HTML tag injection (recommended).","package":"html-webpack-plugin","optional":true}],"imports":[{"note":"Package is CommonJS, not ESM. Use require().","wrong":"import WebpackFavicons from 'webpack-favicons';","symbol":"WebpackFavicons","correct":"const WebpackFavicons = require('webpack-favicons');"},{"note":"Must instantiate with 'new' as it is a class.","wrong":"plugins: [WebpackFavicons({ src: 'favicon.svg' })]","symbol":"WebpackFavicons","correct":"plugins: [new WebpackFavicons({ src: 'favicon.svg' })]"},{"note":"Default export, not named export.","wrong":"const { WebpackFavicons } = require('webpack-favicons');","symbol":"WebpackFavicons","correct":"const WebpackFavicons = require('webpack-favicons');"}],"quickstart":{"code":"// webpack.config.js\nconst WebpackFavicons = require('webpack-favicons');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  mode: 'production',\n  output: {\n    path: '/dist',\n    publicPath: '/~media/',\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new WebpackFavicons({\n      src: 'assets/favicon.svg',\n      path: 'img',\n      background: '#000',\n      theme_color: '#000',\n      icons: {\n        favicons: true,\n      },\n    }),\n  ],\n};","lang":"javascript","description":"Basic Webpack configuration using webpack-favicons with HtmlWebpackPlugin to generate and inject favicon links."},"warnings":[{"fix":"Upgrade Node.js to version 18.17.0 or higher.","message":"Node version requirement increased to >=18.17.0 in version 1.5.0.","severity":"breaking","affected_versions":">=1.5.0"},{"fix":"Ensure your project supports ESM (set type: module in package.json) or use an older version (<=1.2.5) of webpack-favicons.","message":"Version 1.3.0 updated favicons dependency to ESM-only (7.x), breaking CommonJS usage.","severity":"breaking","affected_versions":">=1.3.0"},{"fix":"Use Webpack 5 or migrate to https://github.com/jantimon/favicons-webpack-plugin for Webpack 4.","message":"Version 1.2.0 dropped Webpack 4 support; only Webpack 5 is supported.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Avoid using the 'callback' option; rely on Webpack hooks instead.","message":"The 'callback' option introduced in 1.3.4 is undocumented and may be removed in future versions.","severity":"deprecated","affected_versions":">=1.3.4"},{"fix":"Order plugins: [new HtmlWebpackPlugin(), new WebpackFavicons({...})]","message":"If using HtmlWebpackPlugin, it must be instantiated before WebpackFavicons in the plugins array.","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.","cause":"Missing peer dependency 'favicons'.","error":"Error: Cannot find module 'favicons'"},{"fix":"Use 'new WebpackFavicons({...})' in the plugins array.","cause":"Forgetting 'new' when instantiating the plugin.","error":"TypeError: WebpackFavicons is not a constructor"},{"fix":"Change import to: const WebpackFavicons = require('webpack-favicons');","cause":"Importing as named export instead of default.","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."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}