@redocly/favicons-webpack-plugin
v0.0.11
Published
Let webpack generate all your favicons and icons for you
Downloads
8
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.