{"id":21164388,"url":"https://github.com/josh-hemphill/vite-plugin-favicon","last_synced_at":"2025-04-05T11:07:52.433Z","repository":{"id":38173457,"uuid":"363248621","full_name":"josh-hemphill/vite-plugin-favicon","owner":"josh-hemphill","description":"Leverages on favicons to automatically generate your favicons for you. And if you want to also consolidate your PWA manifest, will generate that as well with linked icons.","archived":false,"fork":false,"pushed_at":"2025-03-28T22:45:04.000Z","size":385,"stargazers_count":51,"open_issues_count":6,"forks_count":13,"subscribers_count":3,"default_branch":"latest","last_synced_at":"2025-03-29T10:09:41.241Z","etag":null,"topics":["favicons","html","plugin","rollup","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/josh-hemphill.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-30T20:12:38.000Z","updated_at":"2025-02-12T15:24:52.000Z","dependencies_parsed_at":"2024-04-23T04:49:39.427Z","dependency_job_id":"1806c1ef-b25e-43a7-a7e8-6f29c78e7aca","html_url":"https://github.com/josh-hemphill/vite-plugin-favicon","commit_stats":{"total_commits":28,"total_committers":5,"mean_commits":5.6,"dds":0.4285714285714286,"last_synced_commit":"1aa7a8634a96c842d6a4b4504de5a9b317568437"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh-hemphill%2Fvite-plugin-favicon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh-hemphill%2Fvite-plugin-favicon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh-hemphill%2Fvite-plugin-favicon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh-hemphill%2Fvite-plugin-favicon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josh-hemphill","download_url":"https://codeload.github.com/josh-hemphill/vite-plugin-favicon/tar.gz/refs/heads/latest","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"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","html","plugin","rollup","vite"],"created_at":"2024-11-20T14:04:22.007Z","updated_at":"2025-04-05T11:07:52.416Z","avatar_url":"https://github.com/josh-hemphill.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Favicons Vite Plugin\n\n\u003c!-- cspell: disable bracketsstartstop --\u003e\n\n[![version](https://img.shields.io/github/v/tag/josh-hemphill/vite-plugin-favicon?sort=semver\u0026style=?style=plastic)](https://github.com/josh-hemphill/vite-plugin-favicon/releases)\n[![NPM](https://img.shields.io/static/v1?label=\u0026message=NPM\u0026color=informational\u0026style=?style=plastic)](https://npmjs.org/package/vite-plugin-favicon)\n[![Codecov](https://img.shields.io/codecov/c/github/josh-hemphill/vite-plugin-favicon.svg?style=?style=plastic)](https://codecov.io/gh/josh-hemphill/vite-plugin-favicon)\n[![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/vite-plugin-favicon?label=Deps\u0026style=?style=plastic)](https://libraries.io/npm/vite-plugin-favicon)\n[![Rate on Openbase](https://badges.openbase.io/js/rating/vite-plugin-favicon.svg)](https://openbase.io/js/vite-plugin-favicon?utm_source=embedded\u0026utm_medium=badge\u0026utm_campaign=rate-badge)\n[![Test](https://github.com/josh-hemphill/vite-plugin-favicon/actions/workflows/test.yml/badge.svg)](https://github.com/josh-hemphill/vite-plugin-favicon/actions/workflows/test.yml)\n[![Release](https://github.com/josh-hemphill/vite-plugin-favicon/actions/workflows/release.yml/badge.svg)](https://github.com/josh-hemphill/vite-plugin-favicon/actions/workflows/release.yml)\n\nLeverages on [favicons](https://github.com/haydenbleasel/favicons) to automatically generate your favicons for you.\nAnd if you want to also consolidate your PWA manifest, will generate that as well with linked icons.\n\nPartially adapted from and config compatible with [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin)\n\n## Installation\n\nInstall the plugin with npm:\n\n```shell\n$ npm install --save-dev vite-plugin-favicon\n# Or shorthand\nnpm i -D vite-plugin-favicon\n```\n\n## Zero Config Usage\n\nAdd your base logo as `logo.png` file to your assets folder.\n\nAdd the plugin to your vite config as follows:\n\n```javascript\nconst ViteFaviconsPlugin = require('vite-plugin-favicon')\n// or ESM\nimport { ViteFaviconsPlugin } from 'vite-plugin-favicon';\n\nplugins: [\n  ViteFaviconsPlugin()\n]\n```\n\n## Basic Usage \u003c!-- [\u003csvg alt=\"codesandbox\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"18\"\u003e\u003cpath d=\"M7.219 15.877V9.394l-5.73-3.208v3.696l2.624 1.48v2.78l3.106 1.735zm1.488.038l3.163-1.773v-2.845l2.642-1.49V6.16l-5.805 3.26v6.496zm5.041-11l-3.05-1.72-2.68 1.512L5.32 3.193 2.241 4.937l5.744 3.215 5.763-3.237zM0 13.513V4.53L8 0l8 4.511V13.5l-8.001 4.484L0 13.513z\" fill=\"currentColor\"/\u003e\u003c/svg\u003e](https://codesandbox.io/s/vite-plugin-favicon-demo-uh195?file=/webpack.config.js) --\u003e\n\nAdd the plugin to your vite config as follows:\n\n```javascript\nconst ViteFaviconsPlugin = require('vite-plugin-favicon')\n// or ESM\nimport { ViteFaviconsPlugin } from \"vite-plugin-favicon\";\n\n...\n\nplugins: [\n  ViteFaviconsPlugin('/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/josh-hemphill/vite-plugin-favicon/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, Vite/Rollup resolve the paths to the logo and favicons 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 `process.cwd()`.\n\n### HTML Injection\n\nIn combination with [Vite's html plugin hooks](https://vitejs.dev/guide/api-plugin.html#transformindexhtml) 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.json\"\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## Advanced Usage\n\n```javascript\nplugins: [\n  ViteFaviconsPlugin({\n    /** Your source logo (Will default to ) */\n    logo?: \"assets/logo.png\",\n    /** Inject html links/metadata. */\n    inject?: true,\n    /** `Favicons` configuration options\n    *  - [See `favicons` documentation](https://github.com/itgalaxy/favicons) */\n    favicons?: FaviconsConfig,\n    /** The root of the project from which you want to load metadata */\n    projectRoot?: process.cwd(),\n\n    /** prefix is delegated to Rollup/Vite (keeping for people migrating from Webpack)\n    * @deprecated */\n    prefix?: string,\n    /** Caching is delegated to Rollup/Vite (keeping for people migrating from Webpack)\n    * @deprecated */\n    cache?: boolean,\n    /** Public Path is delegated to Rollup/Vite (keeping for people migrating from Webpack)\n    * @deprecated */\n    publicPath?: string,\n    /** Output Path is delegated to Rollup/Vite (keeping for people migrating from Webpack)\n    * @deprecated */\n    outputPath?: string,\n  })\n]\n```\n\nTo fine tune what icons/metadata is generated, refer to\n[favicons' documentation](https://github.com/haydenbleasel/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.\nAnd if there's no `author` it will use the first in the `contributors`.\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 ViteFaviconsPlugin = require('vite-plugin-favicon')\n// or ESM\nimport { ViteFaviconsPlugin } from \"vite-plugin-favicon\";\n\nplugins: [\n  ViteFaviconsPlugin({\n    logo: './src/logo.png', // svg works too!\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/haydenbleasel/favicons#usage).\n\n#### Handling Multiple HTML Files\n\nVite calls the HTML transform hook for each HTML file template file you have configured in Vite, so this works automatically.\n\n## Changelog\n\nTake a look at the [CHANGELOG.md](https://github.com/josh-hemphill/vite-plugin-favicon/tree/latest/CHANGELOG.md).\n\n## Contribution\n\nYou're free to contribute to this project by submitting [issues](https://github.com/josh-hemphill/vite-plugin-favicon/issues) and/or [pull requests](https://github.com/josh-hemphill/vite-plugin-favicon/pulls).\n\nPlease keep in mind that every change and feature should be covered by\ntests.\n\n## License\n\nThis project is licensed under [MIT](https://github.com/josh-hemphill/vite-plugin-favicon/blob/latest/LICENSE).\n\n[favicons]: https://github.com/haydenbleasel/favicons\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosh-hemphill%2Fvite-plugin-favicon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosh-hemphill%2Fvite-plugin-favicon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosh-hemphill%2Fvite-plugin-favicon/lists"}