# modern-favicons
> Generates a set of favicons from an SVG file that will satisfy the needs of most modern web projects.
Latest version **4.0.1** (published 2026-08-05) · 0 weekly downloads
## Install
```sh
npm install modern-favicons
pnpm add modern-favicons
yarn add modern-favicons
bun add modern-favicons
```
Provides the command `modern-favicons`.
## Health
**Score 60/100 (C)** — status: active.
Positive: no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads; no types; no esm support.
## Facts
| | |
|---|---|
| Version | 4.0.1 |
| Published | 2026-08-05 |
| First published | 2021-11-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 15 |
| Author | Jeff Rosen |
| Maintainers | agusterodin |
## Links
- npm: https://www.npmjs.com/package/modern-favicons
- Repository: https://github.com/agusterodin/modern-favicons
- Homepage: https://github.com/agusterodin/modern-favicons#readme
- Issues: https://github.com/agusterodin/modern-favicons/issues
- npm.io page: https://npm.io/package/modern-favicons
## Dependencies (4)
- [svgo](https://npm.io/package/svgo.md) ^4.0.2
- [sharp](https://npm.io/package/sharp.md) ^0.35.3
- [favicons](https://npm.io/package/favicons.md) ^7.3.1
- [commander](https://npm.io/package/commander.md) ^15.0.0
## Recent versions
- 4.0.1 (latest) — 2026-08-05
- 4.0.0 — 2026-08-05
- 3.0.0 — 2024-05-22
- 2.0.1 — 2024-05-22
- 2.0.0 — 2024-04-20
- 1.0.9 — 2023-12-27
- 1.0.8 — 2023-12-27
- 1.0.7 — 2023-05-07
- 1.0.6 — 2023-05-07
- 1.0.5 — 2023-05-07
- 1.0.4 — 2023-05-07
- 1.0.3 — 2022-01-09
- 1.0.2 — 2022-01-09
- 1.0.1 — 2021-11-08
- 1.0.0 — 2021-11-07
## README
# Modern Favicons
Generates a set of favicons from an SVG file that will satisfy the needs of most modern web projects.
Inspired by https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs and https://www.leereamsnyder.com/blog/favicons-in-2021.
This tool operates under the assumption that you are running Node 14+ and that the provided SVG file is square (same height and width).
This tool does not generate the legacy masked Safari icon described in the aforementioned articles. If you absolutely need legacy Safari masked icon support, create it manually and place it in the public directory yourself.
## Install
```sh
npm i -D modern-favicons
# or
yarn add -D modern-favicons
```
## Usage
1. Generate the icons to your project's public directory using the CLI command. Run the command without options to see a full list of options. Skip this step if you plan on automating this by adding pre scripts to your package.json.
```sh
npx modern-favicons [...options]
# or
yarn exec -- modern-favicons [...options]
```
2. Add these to the document head.
```html
```
3. Add a file to your project's public directory called manifest.json. Copy this into the file contents.
```json
{
"icons": [
{ "src": "/favicon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/favicon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
```
4. Add [pre script](https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts) entries to package.json for development and build processes.
```json
{
"scripts": {
"predev": "npx modern-favicons --source images/favicon.svg --destination ./public",
"prebuild": "npx modern-favicons --source images/favicon.svg --destination ./public"
}
}
```
5. Add these entries to .gitignore to exclude the generated favicons.
```gitignore
/public/*.png
/public/*.ico
/public/*.svg
```
---
_Source: https://npm.io/package/modern-favicons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._