{"id":14976460,"url":"https://github.com/romanlex/app-manifest-webpack-plugin","last_synced_at":"2025-10-02T08:31:23.271Z","repository":{"id":57182569,"uuid":"127449401","full_name":"romanlex/app-manifest-webpack-plugin","owner":"romanlex","description":"Let webpack generate app manifest,  all your favicons and icons for you","archived":false,"fork":true,"pushed_at":"2020-11-25T11:29:32.000Z","size":2225,"stargazers_count":27,"open_issues_count":3,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-19T17:10:39.598Z","etag":null,"topics":["favicons","manifest","pwa","webpack","webpack-plugin","webpack3","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"jantimon/favicons-webpack-plugin","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romanlex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-30T16:27:42.000Z","updated_at":"2022-05-12T13:39:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/romanlex/app-manifest-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romanlex%2Fapp-manifest-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romanlex%2Fapp-manifest-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romanlex%2Fapp-manifest-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romanlex%2Fapp-manifest-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romanlex","download_url":"https://codeload.github.com/romanlex/app-manifest-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219866489,"owners_count":16554238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["favicons","manifest","pwa","webpack","webpack-plugin","webpack3","webpack4"],"created_at":"2024-09-24T13:53:55.338Z","updated_at":"2025-10-02T08:31:22.849Z","avatar_url":"https://github.com/romanlex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"App Manifest Webpack Plugin\n========================================\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![travis][travis]][travis-url]\n[![Maintainability](https://api.codeclimate.com/v1/badges/ea3844bff7db00d519de/maintainability)](https://codeclimate.com/github/romanlex/app-manifest-webpack-plugin/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/ea3844bff7db00d519de/test_coverage)](https://codeclimate.com/github/romanlex/app-manifest-webpack-plugin/test_coverage)\n\n[npm]: https://img.shields.io/npm/v/app-manifest-webpack-plugin.svg\n[npm-url]: https://www.npmjs.com/package/app-manifest-webpack-plugin\n\n[node]: https://img.shields.io/node/v/app-manifest-webpack-plugin.svg\n[node-url]: https://nodejs.org\n\n[travis]: https://travis-ci.org/gilbarbara/app-manifest-webpack-plugin.svg\n[travis-url]: https://travis-ci.org/romanlex/app-manifest-webpack-plugin\n\n[deps]: https://david-dm.org/romanlex/app-manifest-webpack-plugin.svg\n[deps-url]: https://david-dm.org/romanlex/app-manifest-webpack-plugin\n\nThis is fork of [jantimon/favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin) with improvements:\n\n+ All tests is rewritten with support of webpack v4\n+ All dependencies is updated\n+ The plugin is rewritten in accordance with the principles of DRY\n+ Added support of webpack v4\n+ Added support of all params for config from `favicons` package\n\nAllows to use the [favicons](https://github.com/haydenbleasel/favicons) generator with webpack.\n\nThis plugin also generates manifest files:\n\n+ `manifest.json`\n+ `browserconfig.xml`\n+ `yandex-browser-manifest.json`\n\nScreenshot with inject to HtmlWebpackPlugin\n------------\n\n![Screenshot](example/Screenshot_20180401_111647.png?raw=true \"Screenshot\")\n\nInstallation\n------------\n\nYou must be running `webpack (version ^2.x)` on `node (version ^6.14.1)`\n\nInstall:\n\n```bash\nnpm install --save-dev app-manifest-webpack-plugin\n```\n\nInstall with yarn:\n\n```bash\nyarn add -D app-manifest-webpack-plugin\n```\n\nBasic Usage\n-----------\n\nAdd the plugin to your webpack config as follows:\n\n```javascript\nconst AppManifestWebpackPlugin = require('app-manifest-webpack-plugin')\n\n...\n\nplugins: [\n  new AppManifestWebpackPlugin({\n    logo: 'my-logo.png',\n    inject: false,\n  })\n]\n```\n\nThis basic configuration will generate 37 different icons for iOS devices, Android devices and the Desktop browser out of your `my-logo.png` file.\n\nIt can optionally also generate a `iconstats.json` for you.\n\nUsage with `html-webpack-plugin`\n-----------\n\nIf you are using with [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) it will also inject the necessary html for you:\n\n```html\n  \u003clink rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-57x57.png\"\u003e\n  \u003clink rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-60x60.png\"\u003e\n  \u003clink rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-72x72.png\"\u003e\n  ...\n  ...\n  \u003clink 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\"\u003e\n```\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin(),\n  // Make sure that AppManifestWebpackPlugin below HtmlWebpackPlugin\n  new AppManifestWebpackPlugin({\n    logo: 'my-logo.png',\n    statsFilename: 'iconstats.json',\n    persistentCache: false,\n    config: {\n      path: '/static/assets/',\n    },\n  }),\n]\n```\n\nAll properties\n-----------\n\n```javascript\nplugins: [\n  new AppManifestWebpackPlugin({\n    // Your source logo\n    logo: 'my-logo.png',\n    // Prefix for file names\n    prefix: '/assets/icons-[hash:8]/', // default '/'\n    // Output path for icons (icons will be saved to output.path(webpack config) + this key)\n    output: '/icons-[hash:8]/', // default '/'. Can be absolute or relative\n    // Emit all stats of the generated icons\n    emitStats: false,\n    // The name of the json containing all favicon information\n    statsFilename: 'iconstats.json', // can be absolute path\n    // 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)\n    statsEncodeHtml: false,\n    // Generate a cache file with control hashes and\n    // don't rebuild the favicons until those hashes change\n    persistentCache: true,\n    // Inject the html into the html-webpack-plugin. Default true\n    inject: true,\n    // favicons configuration object. Support all keys of favicons (see https://github.com/haydenbleasel/favicons)\n    config: {\n      loadManifestWithCredentials: true, // use crossOrigin=\"use-credentials\" for link tag with manifest\n      appName: 'Webpack App', // Your application's name. `string`\n      appDescription: null, // Your application's description. `string`\n      developerName: null, // Your (or your developer's) name. `string`\n      developerURL: null, // Your (or your developer's) URL. `string`\n      background: '#fff', // Background colour for flattened icons. `string`\n      theme_color: '#fff', // Theme color for browser chrome. `string`\n      display: 'standalone', // Android display: \"browser\" or \"standalone\". `string`\n      orientation: 'portrait', // Android orientation: \"portrait\" or \"landscape\". `string`\n      start_url: '/?homescreen=1', // Android start application's URL. `string`\n      version: '1.0', // Your application's version number. `number`\n      logging: false, // Print logs to console? `boolean`\n      icons: {\n        // Platform Options:\n        // - offset - offset in percentage\n        // - shadow - drop shadow for Android icons, available online only\n        // - background:\n        //   * false - use default\n        //   * true - force use default, e.g. set background for Android icons\n        //   * color - set background for the specified icons\n        //\n        android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, shadow }`\n        appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background }`\n        appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background }`\n        coast: { offset: 25 }, // Create Opera Coast icon with offset 25%. `boolean` or `{ offset, background }`\n        favicons: true, // Create regular favicons. `boolean`\n        firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background }`\n        windows: true, // Create Windows 8 tile icons. `boolean` or `{ background }`\n        yandex: true, // Create Yandex browser icon. `boolean` or `{ background }`\n      },\n    }\n  })\n]\n```\n\nPrefix and output options\n-----------\nThis options help you save output files or change paths to icons in your html as you want.\nExample 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/`\nwhen you can use options for this\n\n```javascript\n  new AppManifestWebpackPlugin({\n    // Your source logo\n    logo: 'my-logo.png',\n    // Prefix for file names (html will be container icons with this prefix)\n    prefix: '/assets/webpack/',\n    // Output path for icons (icons will be saved to output.path(webpack config) + this key)\n    output: '/icons-[hash:8]/'\n  })\n```\n\nhtml file will be contains current paths\n\n```html\n\u003clink rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"/assets/webpack/icons-4b62aad7/apple-touch-icon-120x120.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"/assets/webpack/icons-4b62aad7/apple-touch-icon-144x144.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"/assets/webpack/icons-4b62aad7/apple-touch-icon-152x152.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/assets/webpack/icons-4b62aad7/apple-touch-icon-180x180.png\"\u003e\n```\n\nbut files will be saved to `/icons-4b62aad7/` directory and you `iconstats.json` contains correct outputFilePrefix\n\n```json\n{ \"outputFilePrefix\":\"/assets/webpack/icons-4b62aad7/\" }\n```\n\n#### Keep in mind what `prefix` change filenames inside html, `output` it is the path where icons wiil be saved\n\n#### Or another case. You want save icons above the directory of webpack `output`  and want set corrent path in the manifest files and html files\n\n```javascript\n  new AppManifestWebpackPlugin({\n    // Your source logo\n    logo: 'my-logo.png',\n    // Output path can be relative. Icons will be saved to webpack output directory + output\n    output: '../icons/',\n    // Change prefix of files  for correct paths in your html and manifest files\n    prefix: '/icons/'\n  })\n```\n\nStats file\n-----------\nWhen you use option `emitStats` the plugin is generated stats file with `statsFilename` and contains usefull data\n\n```json\n{\n  \"outputFilePrefix\":\"/\",\n  \"html\": [], // array of html strings\n  \"files\": [], // array of generated icon names \n  \"encodedHtml\": \"\", // endoded html string if you use statsEncodeHtml option\n}\n\n```\n\n# Changelog\n\nTake a look at the  [CHANGELOG.md](https://github.com/romanlex/favicons-webpack-plugin/tree/master/CHANGELOG.md).\n\n\n# Contribution\n\nYou're free to contribute to this project by submitting [issues](https://github.com/romanlex/favicons-webpack-plugin/issues) and/or [pull requests](https://github.com/romanlex/favicons-webpack-plugin/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.\nThis project uses the [semistandard code style](https://github.com/Flet/semistandard).\n\n# License\n\nThis project is licensed under [MIT](https://github.com/romanlex/favicons-webpack-plugin/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromanlex%2Fapp-manifest-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromanlex%2Fapp-manifest-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromanlex%2Fapp-manifest-webpack-plugin/lists"}