{"id":13451822,"url":"https://github.com/jantimon/favicons-webpack-plugin","last_synced_at":"2025-04-09T02:16:06.175Z","repository":{"id":37444323,"uuid":"56582002","full_name":"jantimon/favicons-webpack-plugin","owner":"jantimon","description":"Let webpack generate all your favicons and icons for you","archived":false,"fork":false,"pushed_at":"2024-05-31T11:28:23.000Z","size":6183,"stargazers_count":1205,"open_issues_count":16,"forks_count":210,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-02T01:14:10.018Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jantimon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"html-webpack-plugin","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2016-04-19T09:07:20.000Z","updated_at":"2025-03-03T14:59:06.000Z","dependencies_parsed_at":"2024-06-02T16:34:51.159Z","dependency_job_id":"e9507126-e55e-405d-9963-e465acaaaf5f","html_url":"https://github.com/jantimon/favicons-webpack-plugin","commit_stats":{"total_commits":343,"total_committers":34,"mean_commits":"10.088235294117647","dds":0.6384839650145773,"last_synced_commit":"4510234a09312f9ed4877027255edad004f27b4c"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ffavicons-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ffavicons-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ffavicons-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ffavicons-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jantimon","download_url":"https://codeload.github.com/jantimon/favicons-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247902663,"owners_count":21015492,"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":[],"created_at":"2024-07-31T07:01:03.764Z","updated_at":"2025-04-09T02:16:06.140Z","avatar_url":"https://github.com/jantimon.png","language":"JavaScript","funding_links":["https://opencollective.com/html-webpack-plugin"],"categories":["JavaScript"],"sub_categories":[],"readme":"Favicons Webpack Plugin\n========================================\n[![npm version](https://badge.fury.io/js/favicons-webpack-plugin.svg)](http://badge.fury.io/js/favicons-webpack-plugin) [![CI](https://github.com/jantimon/favicons-webpack-plugin/workflows/CI/badge.svg)](https://github.com/jantimon/favicons-webpack-plugin/actions?query=workflow%3ACI) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)\n\nLeverages on [favicons](https://github.com/itgalaxy/favicons) to automatically generate your favicons for you.\n\n## Installation\n\nInstall the plugin and [favicons](https://github.com/itgalaxy/favicons) with npm:\n```shell\n$ npm install --save-dev favicons favicons-webpack-plugin\n```\n\n## Zero Config Usage\n\nAdd your base logo as `logo.png` file to you webpack context folder.\n(By default the context is the current working directory)\n\nAdd the plugin to your webpack config as follows:\n\n```javascript\nconst FaviconsWebpackPlugin = require('favicons-webpack-plugin')\n\nplugins: [\n  new FaviconsWebpackPlugin()\n]\n```\n\n## Basic Usage\n\n[Demo](https://codesandbox.io/s/favicons-webpack-plugin-demo-uh195?file=/webpack.config.js)\n\n\nAdd the plugin to your webpack config as follows:\n\n```javascript\nconst FaviconsWebpackPlugin = require('favicons-webpack-plugin')\n\n...\n\nplugins: [\n  new FaviconsWebpackPlugin('/path/to/logo.png') // svg works too!\n]\n```\n\nThe default configuration will automatically generate webapp manifest files along with\n[44 different icon formats](https://github.com/jantimon/favicons-webpack-plugin/tree/master/test/fixtures/expected/default)\nas appropriate for iOS devices, Android devices, Windows Phone and various desktop browsers out of your single `logo.png`.\n\n\u003e **Tip:** You might want to [fine tune](#advanced-usage) what vendors to support.\n\n### A Note on Path Resolution\n\nUnder the hood, Webpack resolves the path to logo according to the following\nrules:\n\n* If `/path/to/logo` is absolute, there is nothing to resolve and the path\nspecified is used as is.\n\n* If `./path/to/logo` is relative, it's resolved with respect to Webpack's\n[`context`](https://webpack.js.org/configuration/entry-context/#context),\nwhich defaults to `process.cwd()`.\n\n* If `path/to/logo` is neither explicitly relative nor absolute,\nWebpack attempts to resolve it according to\n[`resolve.modules`](https://webpack.js.org/configuration/resolve/#resolve-modules),\nwhich defaults to `modules: [\"node_modules\"]`.\n\n### HTML Injection\n\nIn combination with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) it will also inject the necessary html for you:\n\n```html\n\u003clink rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"/assets/apple-touch-icon-57x57.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"/assets/apple-touch-icon-60x60.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"/assets/apple-touch-icon-72x72.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"/assets/apple-touch-icon-76x76.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"/assets/apple-touch-icon-114x114.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"/assets/apple-touch-icon-120x120.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"/assets/apple-touch-icon-144x144.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"/assets/apple-touch-icon-152x152.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"167x167\" href=\"/assets/apple-touch-icon-167x167.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/assets/apple-touch-icon-180x180.png\"\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"1024x1024\" href=\"/assets/apple-touch-icon-1024x1024.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"/assets/apple-touch-startup-image-320x460.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"/assets/apple-touch-startup-image-640x920.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"/assets/apple-touch-startup-image-640x1096.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"/assets/apple-touch-startup-image-750x1294.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"/assets/apple-touch-startup-image-1182x2208.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"/assets/apple-touch-startup-image-1242x2148.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"/assets/apple-touch-startup-image-748x1024.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"/assets/apple-touch-startup-image-1496x2048.png\"\u003e\n\u003clink rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"/assets/apple-touch-startup-image-768x1004.png\"\u003e\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=\"/assets/apple-touch-startup-image-1536x2008.png\"\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/favicon-16x16.png\"\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/favicon-32x32.png\"\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"/assets/coast-228x228.png\"\u003e\n\u003clink rel=\"manifest\" href=\"/assets/manifest.webmanifest\"\u003e\n\u003clink rel=\"shortcut icon\" href=\"/assets/favicon.ico\"\u003e\n\u003clink rel=\"yandex-tableau-widget\" href=\"/assets/yandex-browser-manifest.json\"\u003e\n\u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\"\u003e\n\u003cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"\u003e\n\u003cmeta name=\"apple-mobile-web-app-title\"\u003e\n\u003cmeta name=\"application-name\"\u003e\n\u003cmeta name=\"mobile-web-app-capable\" content=\"yes\"\u003e\n\u003cmeta name=\"msapplication-TileColor\" content=\"#fff\"\u003e\n\u003cmeta name=\"msapplication-TileImage\" content=\"/assets/mstile-144x144.png\"\u003e\n\u003cmeta name=\"msapplication-config\" content=\"/assets/browserconfig.xml\"\u003e\n\u003cmeta name=\"theme-color\" content=\"#fff\"\u003e\n```\n\n\u003e https://github.com/jantimon/favicons-webpack-plugin/blob/master/test/fixtures/expected/html\n\n## Advanced Usage\n\n```javascript\nplugins: [\n  new FaviconsWebpackPlugin({\n    // Your source logo (required)\n    logo: './src/logo.png',\n    // Your maskable source logo (optional)\n    logoMaskable: './src/logo-maskable.png',\n    // Allow caching the assets across webpack builds. By default this will use\n    // webpack's cache configuration, but can be set to false to disable caching.\n    // Note: disabling caching may increase build times considerably.\n    // For more information, see: https://webpack.js.org/configuration/cache/\n    cache: true,\n    // Override the publicPath option usually read from webpack configuration\n    publicPath: '/static',\n    // The directory to output the assets relative to the webpack output dir.\n    // Relative string paths are allowed here ie '../public/static'. If this\n    // option is not set, `prefix` is used.\n    outputPath: '/public/static',\n    // Prefix path for generated assets\n    prefix: 'assets/',\n    // Inject html links/metadata (requires html-webpack-plugin).\n    // This option accepts arguments of different types:\n    //  * boolean\n    //    `false`: disables injection\n    //    `true`: enables injection if that is not disabled in html-webpack-plugin\n    //  * function\n    //    any predicate that takes an instance of html-webpack-plugin and returns either\n    //    `true` or `false` to control the injection of html metadata for the html files\n    //    generated by this instance.\n    inject: true,\n\n    // Favicons configuration options (see below)\n    favicons: {\n      ...\n    }\n  })\n]\n```\n\nTo fine tune what icons/metadata is generated, refer to\n[favicons' documentation](https://github.com/itgalaxy/favicons#usage).\n\nThe options specified under `favicons:` are handed over as is to [favicons],\nexcept that if `appName`, `appDescription`, `version`, `developerName` or\n`developerURL` are left `undefined`, they will be automatically inferred\nrespectively from `name`, `description`, `version`, `author.name` and\n`author.url` as defined in the nearest `package.json` if available.\nTo disable automatically retrieving metadata from `package.json`, simply set\nto `null` the properties you want to omit.\n\n### Examples\n\n#### Basic\n\n```javascript\nconst FaviconsWebpackPlugin = require('favicons-webpack-plugin')\n\nplugins: [\n  new FaviconsWebpackPlugin({\n    logo: './src/logo.png', // svg works too!\n    mode: 'webapp', // optional can be 'webapp', 'light' or 'auto' - 'auto' by default\n    devMode: 'webapp', // optional can be 'webapp' or 'light' - 'light' by default \n    favicons: {\n      appName: 'my-app',\n      appDescription: 'My awesome App',\n      developerName: 'Me',\n      developerURL: null, // prevent retrieving from the nearest package.json\n      background: '#ddd',\n      theme_color: '#333',\n      icons: {\n        coast: false,\n        yandex: false\n      }\n    }\n  })\n]\n```\n\nTo fine tune what icons/metadata is generated, refer to\n[favicons' documentation](https://github.com/itgalaxy/favicons#usage).\n\n#### Handling Multiple HTML Files\n\n```javascript\nconst FaviconsWebpackPlugin = require('favicons-webpack-plugin')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst { basename } = require('path')\n\n...\n\nplugins: [\n    new HtmlWebpackPlugin({\n        template: 'a.html.tmpl',\n        filename: 'a.html',\n    }),\n    new HtmlWebpackPlugin({\n        template: 'b.html.tmpl',\n        filename: 'b.html',\n    }),\n    new FaviconsWebpackPlugin({\n        logo: 'logo.svg',\n        inject: htmlPlugin =\u003e \n          basename(htmlPlugin.options.filename) === 'a.html',\n    }),\n],\n```\n\n### Compilation Modes\n\nModes allow you to choose a very fast simplified favicon compilation or a production ready favicon compilation\n\nBy default or if the favicons mode option is set to `auto` the favicon compilation depends on the webpack mode:  \nIf the webpack mode is set to `development` the favicons mode will use a quick `light` favicons build.  \nIf the webpack mode is set to `production` the favicons mode will use a full `webapp` favicons build.\n\nThis behaviour can be adjusted by setting the favicons `mode` and `devMode` options.\n\n### Custom manifests\n\nThe manifest options allows to overwrite values of the generated manifest.webmanifest with own values\n\n```javascript\nconst FaviconsWebpackPlugin = require('favicons-webpack-plugin')\n\nplugins: [\n  new FaviconsWebpackPlugin({\n    logo: './src/logo.png',\n    mode: 'webapp',\n    manifest: './src/manifest.webmanifest'\n  })\n]\n```\n\n## Compatibility\n\nfavicons-webpack-plugin 2.x is compatible with html-webpack-plugin 3.x  \nfavicons-webpack-plugin 3.x - 4.x is compatible with html-webpack-plugin 4.x  \nfavicons-webpack-plugin 5.x - 6.x is compatible with html-webpack-plugin 5.x\n\n## Changelog\n\nTake a look at the [CHANGELOG.md](https://github.com/jantimon/favicons-webpack-plugin/tree/master/CHANGELOG.md).\n\n## Contribution\n\nYou're free to contribute to this project by submitting [issues](https://github.com/jantimon/favicons-webpack-plugin/issues) and/or [pull requests](https://github.com/jantimon/favicons-webpack-plugin/pulls).\n\nPlease keep in mind that every change and new feature should be covered by\ntests.\n\n## License\n\nThis project is licensed under [MIT](https://github.com/jantimon/favicons-webpack-plugin/blob/master/LICENSE).\n\n[favicons]: https://github.com/itgalaxy/favicons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjantimon%2Ffavicons-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjantimon%2Ffavicons-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjantimon%2Ffavicons-webpack-plugin/lists"}