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 Score

55.4

Supply Chain

93.1

Quality

82.6

Maintenance

100

Vulnerability

92.6

License

Pull Requests

Open

0

Total

20

Closed

2

Merged

18

Issues

Open

0

Total

6

Closed

6

Releases

Release 1.5.4

1.5.4

Published on 24 Oct 2024

Release 1.5.1

1.5.1

Published on 23 Oct 2024

Release 1.5.0

1.5.0

Published on 23 Oct 2024

Release 1.3.8

1.3.8

Published on 31 Jan 2022

Release 1.3.4

1.3.4

Published on 21 Jan 2022

Release 1.3.2

1.3.2

Published on 21 Jan 2022

View all 16 releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

JavaScript

HTML

JavaScript (99.24%)

HTML (0.76%)

Developer

drolsen

Download Statistics

Total Downloads

218,928

Last Day

Last Week

2,081

Last Month

8,021

Last Year

76,011

GitHub Statistics

6 Stars

59 Commits

1 Forks

2 Watching

2 Branches

1 Contributors

Maintainers

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

Publised On

24 Oct 2024

Total Downloads

Cumulative downloads

Total Downloads

218,928

Last day

44.6%

Compared to previous day

Last week

1.3%

2,081

Compared to previous week

Last month

-11.2%

8,021

Compared to previous month

Last year

-15.4%

76,011

Compared to previous year

Daily Downloads

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

Versions

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.

10

Maintained

Determines if the project is "actively maintained".

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

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

/10

Last Scanned on 2024-12-16

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

Other packages similar to webpack-favicons

favicons-webpack-plugin

6.0.1

Let webpack generate all your favicons and icons for you

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.

webpack-favicons-manifest

1.0.1

Webpack Plugin to Generate the all types of icons and manifest file for different platforms