@gizmo-v-nk/favicon-generator
v1.1.0
Published
A simple CLI tool to generate favicon and PWA icons from a single source image. Creates multiple icon sizes for web, iOS, and Android.
Maintainers
Readme
favicon-generator
A simple CLI tool to generate favicon and PWA icons from a single source image.
Features
- 🎨 Generates multiple icon sizes from one source image
- 📱 Creates PWA icons (android-chrome-192x192.png, android-chrome-512x512.png)
- 🍎 Creates Apple touch icon (apple-touch-icon.png)
- 🌐 Generates standard favicons (favicon-16x16.png, favicon-32x32.png)
- 📦 Creates favicon.ico file
- ⚡ Simple one-command usage
Installation
As a dev dependency (recommended)
npm install --save-dev favicon-generator
# or
pnpm add -D favicon-generator
# or
yarn add -D favicon-generatorGlobal installation
npm install -g favicon-generatorUsage
Place your source icon as
public/source-icon.pngin your project root (default)- The source image should be square and high resolution (at least 512x512px recommended)
- PNG format is recommended
Run the generator:
# Default usage (uses public/source-icon.png and outputs to ./public)
npx generate-icons
# or
generate-icons
# Specify a custom input file
npx generate-icons --input ./assets/icon.png
# or
generate-icons -i ./assets/icon.png
# Specify a custom output directory
npx generate-icons --output ./dist/icons
# or
generate-icons -o ./dist/icons
# Both together
npx generate-icons -i ./assets/icon.png -o ./dist/iconsThe tool will create the output directory if it doesn't exist.
- The following files will be generated in the
public/directory:favicon.ico- Multi-resolution .ico file (16x16, 32x32)favicon-16x16.png- 16x16 faviconfavicon-32x32.png- 32x32 faviconapple-touch-icon.png- 180x180 Apple touch iconandroid-chrome-192x192.png- 192x192 Android Chrome iconandroid-chrome-512x512.png- 512x512 Android Chrome iconandroid-chrome-maskable-512x512.png- 512x512 maskable icon
HTML Integration
Add the following to your HTML <head> section:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">PWA Manifest Integration
For Progressive Web Apps, add to your manifest.json:
{
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/android-chrome-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Requirements
- Node.js >= 14.0.0
Dependencies
This tool uses:
License
MIT
