
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
app-manifest-webpack-plugin
Advanced tools
Let webpack generate manifest files, all your favicons and icons for you
This is fork of jantimon/favicons-webpack-plugin with improvements:
favicons
packageAllows to use the favicons generator with webpack.
This plugin also generates manifest files:
manifest.json
browserconfig.xml
yandex-browser-manifest.json
You must be running webpack (version ^2.x)
on node (version ^6.14.1)
Install:
npm install --save-dev app-manifest-webpack-plugin
Install with yarn:
yarn add -D app-manifest-webpack-plugin
Add the plugin to your webpack config as follows:
const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin')
...
plugins: [
new AppManifestWebpackPlugin({
logo: 'my-logo.png',
inject: false,
})
]
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 iconstats.json
for you.
html-webpack-plugin
If you are using with html-webpack-plugin it will also inject the necessary html for you:
<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">
plugins: [
new HtmlWebpackPlugin(),
// Make sure that AppManifestWebpackPlugin below HtmlWebpackPlugin
new AppManifestWebpackPlugin({
logo: 'my-logo.png',
statsFilename: 'iconstats.json',
persistentCache: false,
config: {
path: '/static/assets/',
},
}),
]
plugins: [
new AppManifestWebpackPlugin({
// Your source logo
logo: 'my-logo.png',
// Prefix for file names
prefix: '/assets/icons-[hash:8]/', // default '/'
// Output path for icons (icons will be saved to output.path(webpack config) + this key)
output: '/icons-[hash:8]/', // default '/'
// Emit all stats of the generated icons
emitStats: false,
// The name of the json containing all favicon information
statsFilename: 'iconstats.json', // can be absolute path
// Encode html entities in stats file (Example json_decode from php doesn't support html strings with escaped double quotes but it's valid json)
statsEncodeHtml: false,
// 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. Default true
inject: true,
// favicons configuration object. Support all keys of favicons (see https://github.com/haydenbleasel/favicons)
config: {
appName: 'Webpack App', // Your application's name. `string`
appDescription: null, // Your application's description. `string`
developerName: null, // Your (or your developer's) name. `string`
developerURL: null, // Your (or your developer's) URL. `string`
background: '#fff', // Background colour for flattened icons. `string`
theme_color: '#fff', // Theme color for browser chrome. `string`
display: 'standalone', // Android display: "browser" or "standalone". `string`
orientation: 'portrait', // Android orientation: "portrait" or "landscape". `string`
start_url: '/?homescreen=1', // Android start application's URL. `string`
version: '1.0', // Your application's version number. `number`
logging: false, // Print logs to console? `boolean`
icons: {
// Platform Options:
// - offset - offset in percentage
// - shadow - drop shadow for Android icons, available online only
// - background:
// * false - use default
// * true - force use default, e.g. set background for Android icons
// * color - set background for the specified icons
//
android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, shadow }`
appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background }`
appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background }`
coast: { offset: 25 }, // Create Opera Coast icon with offset 25%. `boolean` or `{ offset, background }`
favicons: true, // Create regular favicons. `boolean`
firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background }`
windows: true, // Create Windows 8 tile icons. `boolean` or `{ background }`
yandex: true, // Create Yandex browser icon. `boolean` or `{ background }`
},
}
})
]
This options help you save output files or change paths to icons in your html as you want.
Example you want save output icons to icons/
directory in your build path but in html you want set another prefix for files, example /assets/webpack/icons/
when you can use options for this
new AppManifestWebpackPlugin({
// Your source logo
logo: 'my-logo.png',
// Prefix for file names (html will be container icons with this prefix)
prefix: '/assets/webpack/',
// Output path for icons (icons will be saved to output.path(webpack config) + this key)
output: '/icons-[hash:8]/'
})
html file will be contains current paths
<link rel="apple-touch-icon" sizes="120x120" href="/assets/webpack/icons-4b62aad7/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/webpack/icons-4b62aad7/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/webpack/icons-4b62aad7/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/webpack/icons-4b62aad7/apple-touch-icon-180x180.png">
but files will be saved to /icons-4b62aad7/
directory and you iconstats.json
contains correct outputFilePrefix
{ "outputFilePrefix":"/assets/webpack/icons-4b62aad7/" }
prefix
change filenames inside html, output
it is the path where icons wiil be savedWhen you use option emitStats
the plugin is generated stats file with statsFilename
and contains usefull data
{
"outputFilePrefix":"/",
"html": [], // array of html strings
"files": [], // array of generated icon names
"encodedHtml": "", // endoded html string if you use statsEncodeHtml option
}
Take a look at the CHANGELOG.md.
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.
This project is licensed under MIT.
1.1.2
FAQs
Let webpack generate manifest files, all your favicons and icons for you
The npm package app-manifest-webpack-plugin receives a total of 74 weekly downloads. As such, app-manifest-webpack-plugin popularity was classified as not popular.
We found that app-manifest-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.