Favicons Webpack Plugin

Allows to use the favicons generator with webpack

Installation

You must be running webpack on node 0.12.x or higher

Install the plugin with npm:

1$ npm install --save-dev favicons-webpack-plugin

Basic Usage

Add the plugin to your webpack config as follows:

1let FaviconsWebpackPlugin = require('favicons-webpack-plugin')
2
3...
4
5plugins: [
6  new FaviconsWebpackPlugin('my-logo.png')
7]

This basic configuration will generate 37 different icons for iOS devices, Android devices and the Desktop browser out of your my-logo.png file. It can optionally also generate a JSON file with all information about the icons for you.

If you are using with html-webpack-plugin it will also inject the necessary html for you:

https://github.com/jantimon/favicons-webpack-plugin/blob/master/test/fixtures/expected/default-with-html/index.html

1  <link rel="apple-touch-icon" sizes="57x57" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-57x57.png">
2  <link rel="apple-touch-icon" sizes="60x60" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-60x60.png">
3  <link rel="apple-touch-icon" sizes="72x72" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-72x72.png">
4  ...
5  ...
6  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-startup-image-1536x2008.png">

Advanced Usage

1plugins: [
2  new FaviconsWebpackPlugin({
3    // Your source logo
4    logo: 'my-logo.png',
5    // The prefix for all image files (might be a folder or a name)
6    prefix: 'icons-[hash]/',
7    // Emit all stats of the generated icons
8    emitStats: false,
9    // The name of the json containing all favicon information
10    statsFilename: 'iconstats-[hash].json',
11    // Generate a cache file with control hashes and
12    // don't rebuild the favicons until those hashes change
13    persistentCache: true,
14    // Inject the html into the html-webpack-plugin
15    inject: true,
16    // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
17    background: '#fff',
18    // favicon app title (see https://github.com/haydenbleasel/favicons#usage)
19    title: 'Webpack App',
20
21    // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
22    icons: {
23      android: true,
24      appleIcon: true,
25      appleStartup: true,
26      coast: false,
27      favicons: true,
28      firefox: true,
29      opengraph: false,
30      twitter: false,
31      yandex: false,
32      windows: false
33    }
34  })
35]

Changelog

Take a look at the CHANGELOG.md.

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. This project uses the semistandard code style.

License

This project is licensed under MIT.