@redocly/favicons-webpack-plugin
v0.0.11
Published
Let webpack generate all your favicons and icons for you
Downloads
17
Readme
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:
$ npm install --save-dev favicons-webpack-plugin
Basic Usage
Add the plugin to your webpack config as follows:
let FaviconsWebpackPlugin = require('favicons-webpack-plugin')
...
plugins: [
new FaviconsWebpackPlugin('my-logo.png')
]
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
<link rel="apple-touch-icon" sizes="57x57" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-72x72.png">
...
...
<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
plugins: [
new FaviconsWebpackPlugin({
// Your source logo
logo: 'my-logo.png',
// The prefix for all image files (might be a folder or a name)
prefix: 'icons-[hash]/',
// Emit all stats of the generated icons
emitStats: false,
// The name of the json containing all favicon information
statsFilename: 'iconstats-[hash].json',
// Generate a cache file with control hashes and
// don't rebuild the favicons until those hashes change
persistentCache: true,
// Inject the html into the html-webpack-plugin
inject: true,
// WebApp Manifest Configuration (see https://github.com/itgalaxy/favicons#usage)
appName: null, // Inferred from package.json by default
appDescription: null,
developerName: null,
developerURL: null,
dir: 'auto',
lang: 'en-US',
background: '#fff',
theme_color: '#fff',
appleStatusBarStyle: 'black-translucent',
display: 'standalone',
orientation: 'any',
start_url: '/?homescreen=1',
version: '1.0',
// which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: false
}
})
]
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.