A Node.js CLI tool that generates a full set of favicons from PNG and SVG source images. Outputs optimized icons in multiple sizes and formats (ICO, Apple Touch Icon, Android Chrome, etc.) ready for cross-browser use.
- Generated files:
favicon.ico(multi-size: 16px, 32px, 48px, 256px from PNG)favicon.svg(optimized from source SVG)favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.png(180×180px)icon-192.pngandicon-512.png(for Android/PWA manifest)
- PNG and SVG input: Accepts both formats as source material. Defaults
to
./favicon_src.pngand./favicon_src.svg. - Image optimization: Uses
sharpfor PNG resizing,imagemin+imagemin-pngquantfor PNG compression,svgofor SVG optimization, andpng2iconsfor ICO generation. - Custom output directory: Specify an output path with
--dist, or let the tool create afavicons_xxxxdirectory in the current working directory. - CLI arguments: Simple command-line interface with
--helpfor usage details. - Error handling: Reports missing source files and image processing failures.
Note: This tool does not generate a 512×512 maskable icon for PWA safe-zone compliance. This must be created separately using a tool like maskable.app. Make sure your PWA manifest references the maskable icon alongside other icons.
- Node.js v24 LTS (tested and recommended version, specified in
.nvmrc) - npm packages (installed automatically with the tool):
- imagemin
- imagemin-pngquant
- sharp
- svgo
- png2icons
sudo npm install -g favicon-generator-clisudo npm install -g git+https://github.com/andmitr/favicon-generator-cli.gitsudo npm uninstall -g favicon-generator-cliIf you have libvips installed system-wide, sharp installation may fail. Use SHARP_IGNORE_GLOBAL_LIBVIPS=1 to bypass it:
# From npm
sudo SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm install -g favicon-generator-cli
# From GitHub
sudo SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm install -g git+https://github.com/andmitr/favicon-generator-cli.git
# Run without installation
SHARP_IGNORE_GLOBAL_LIBVIPS=1 npx --package=favicon-generator-cli favgenfavgen [--png <path>] [--svg <path>] [--dist <output-dir>]npx --package=favicon-generator-cli favgen [--png <path>] [--svg <path>] [--dist <output-dir>]| Argument | Alias | Default | Description |
|---|---|---|---|
| --png | -p | ./favicon_src.png | Path to the source PNG image |
| --svg | -s | ./favicon_src.svg | Path to the source SVG image |
| --dist | -d | ./favicons_xxxx | Output directory for generated files |
| --help | -h | — | Show help message and exit |
# Custom source files and output directory
favgen --png ./myicon.png --svg ./myicon.svg --dist ./favs
# Default source files, custom output directory
favgen --dist iconsAdd the generated favicons to the <head> of your HTML:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png">
<link rel="manifest" href="/manifest.webmanifest">Reference icon-192.png and icon-512.png in your manifest.webmanifest.
1CCnwAvJYEoDVGM7vsBg2Q99cF9EHtBVaY
-168363?style=flat&logo=tether&logoColor=white&logoSize=auto){kind=icon}
0x54f0ccc6b2987de454f69f2814fc9202bcfb74fe
MIT Licensed. See LICENSE for details.