npmpackage.info

Gathering detailed insights and metrics for webpack-favicons

Other packages similar to webpack-favicons

favicons-webpack-plugin

6.0.1

Let webpack generate all your favicons and icons for you

html-bundler-webpack-plugin

4.21.0

Generates complete single-page or multi-page website from source assets. Built-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.

favicons-webpack-plugin-ssr

5.2.0

Let webpack generate all your favicons and icons for you

bud-favicons

0.0.15

Bud.js extension to automatically generate favicons.

Gathering detailed insights and metrics for webpack-favicons

webpack-favicons - 1.5.4 | npmpackage.info

webpack-favicons

Plugin to generate favicons for browsers and devices

1.5.4

JavaScript

78.38 kB

Installations

npm install webpack-favicons

Developer Guide

BETA

Typescript

No

Module System

N/A

Min. Node Version

>=18.17.0

Node Version

18.17.0

NPM Version

9.6.7 Pull Requests

Open

0

Total

21

Closed

2

Merged

19

Issues

Open

0

Total

7

Closed

7

Releases

Release 1.5.47

1.5.47

Updated on Jun 12, 2025

Release 1.5.4

1.5.4

Updated on Oct 24, 2024

Release 1.5.1

1.5.1

Updated on Oct 23, 2024

Release 1.5.0

1.5.0

Updated on Oct 23, 2024

Release 1.3.8

1.3.8

Updated on Jan 31, 2022

Release 1.3.4

1.3.4

Updated on Jan 21, 2022

View All 17 releases

Languages

JavaScript

HTML

JavaScript (99.44%)

HTML (0.56%)

Developer

drolsen

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

7 Stars

65 Commits

1 Forks

1 Watchers

2 Branches

1 Contributors

Updated on Jun 12, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.5.4

Package Id

webpack-favicons@1.5.4

Unpacked Size

78.38 kB

Size

46.56 kB

File Count

NPM Version

9.6.7

Node Version

18.17.0

Published on

Oct 24, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

favicons

Dev Dependencies

ava clean-webpack-plugin copy-webpack-plugin html-loader html-webpack-plugin webpack webpack-cli

Plugin to generate favicons for browsers and devices.

Does this plugin work with Webpack 4?

No, you should checkout https://github.com/jantimon/favicons-webpack-plugin for a Webpack 4 compatible plugin.

How does it works

By tapping into the Webpack 5's latest hooks, WebackFavicon digs into a given build to search for any instances of HTML file assets. While doing that, it leverages the favicon (https://github.com/itgalaxy/favicons) module to generate configured favicons off your provided source file.

Once done, you will have device or browser specific generated favicons written to disk while HTML files (with a <head> tag) will have corresponding <link> tags injected.

Does this work with CopyWebpackPlugin?

Yep! While it is more common to see a Webpack configuration using HtmlWebpackPlugin in order to process HTML files; WebpackFavicons will inject <link> tags into HTML documents found being copied by CopyWebpackPlugin and/or HtmlWebpackPlugin.

Install

npm i --save-dev webpack-favicons

yarn add --dev webpack-favicons

Webpack Config

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

Instantiate a new WebpackFavicons() class within Webpack configuration's plugin array:

1
2// Basic configuration
3
4module.exports = {

5  output: {

6    path: '/dist', 

7    publicPath: '/~media/'
8  }  

9  plugins: [
10    new WebpackFavicons({

11      src: 'assets/favicon.svg',

12      path: 'img',

13      background: '#000',

14      theme_color: '#000',

15      icons: {

16        favicons: true
17      }
18    })
19  ]
20};

Will result in file(s) being written to:

/dist/img/favicon.ico
/dist/img/favicon16x16.png
/dist/img/favicon32x32.png
/dist/img/favicon48x48.png

While any HTML with a <head> tag will have paths to favicons added:

1<link rel="shortcut icon" href="/~media/img/favicon.ico">
2<link rel="icon" type="image/png" sizes="16x16" href="/~media/img/favicon-16x16.png">
3<link rel="icon" type="image/png" sizes="32x32" href="/~media/img/favicon-32x32.png">
4<link rel="icon" type="image/png" sizes="48x48" href="/~media/img/favicon-48x48.png">

It is recommended that your source favicon file be a SVG vector file to allow best possible quality to generated pixel based favicons from.

Options

Note: These options both come from, and are directly passed to the favicon generating node module. For much more information about these options please visit: https://github.com/itgalaxy/favicons

Option	Type	Description
`src`	String	Path to the source favicon file which all favicons will be generated from
`path`	String	Path to where icons get written (is relative to webpack's `output.path`)
`appName`	String	Your application's name.
`appShortName`	String	Your application's short_name. (Optional. If not set, appName will be used)
`appDescription`	String	Your application's description.
`developerName`	String	Your (or your developer's) name.
`developerURL`	String	Your (or your developer's) URL.
`dir`	String	Primary text direction for name, short_name, and description
`lang`	String	Primary language for name and short_name
`background`	String	Background color for flattened icons.
`theme_color`	String	Theme color user for example in Android's task switcher.
`appleStatusBarStyle`	String	Style for Apple status bar: "black-translucent", "default", "black".
`display`	String	Preferred display mode: "fullscreen", "standalone", "minimal-ui" or "browser".
`orientation`	String	Default orientation: "any", "natural", "portrait" or "landscape".
`scope`	String	set of URLs that the browser considers within your app
`start_url`	String	Start URL when launching the application from a device.
`version`	String	Your application's version string.
`logging`	Boolean	Print logs to console?
`pixel_art`	String	Keeps pixels "sharp" when scaling up, for pixel art. Only supported in offline mode.
`loadManifestWithCredentials`	Boolean	Browsers don't send cookies when fetching a manifest, enable this to fix that.
`icons`	Object	See below for more details about this object's options.

Icon Object's Options

Option	Type	Description
`android`	Boolean	Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`appleIcon`	Boolean	Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`appleStartup`	Boolean	Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`coast`	Boolean	Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`favicons`	Boolean	Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`firefox`	Boolean	Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`windows`	Boolean	Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
`yandex`	Boolean	Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources

Callback

Optional callback allowing the opportunity to alter the generated images, html and manifest file(s) data prior to Webpack writing anything to disk:

1
2// Basic configuration
3
4module.exports = {
5  output: {
6    path: '/dist', 
7    publicPath: '/~media/'
8  }  
9  plugins: [
10    new WebpackFavicons({
11      ...
12    }, (response) => {
13      // alter generated images, html or manifest file data here
14      response.images[0].name = 'custom.ico';
15      response.html[0] = response.html[0].replace('favicon.ico', 'custom.ico');
16    })
17  ]
18};

Tests

Webpack Favicons comes with a few tests. These helps ensure that both favicons get written to disk and that link tags are injected into any HTML assets within the larger Webpack build process.

Simply run npm run test or yarn test from the root of the plugin to run test.

Running a test will produce a /dist/ directory.

If you would like to change a test, update the root package.json file's test script to use any of the /test/test.config.js files.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More