@profullstack/favicon-generator

Generate PNG icons from SVG for iOS and PWA compatibility. A modern, flexible Node.js tool that converts your SVG favicon into all the icon sizes you need for mobile devices and progressive web apps.


Features

- 🎨 Convert SVG to multiple PNG icon sizes
- 📱 iOS Apple Touch Icon support
- 🌐 PWA icon generation
- 🖼️ Automatic favicon size generation (16x16, 32x32)
- ⚙️ Configurable quality and compression
- 🎯 CLI with interactive mode
- 📦 ESM module for programmatic use
- ✅ Comprehensive test coverage
- 🚀 Built with modern Node.js (v20+)

Installation

``bash


Using pnpm (recommended)

pnpm add @profullstack/favicon-generator

Using npm

npm install @profullstack/favicon-generator

Using yarn

yarn add @profullstack/favicon-generator
`

$3

`bash


Using pnpm

pnpm add -g @profullstack/favicon-generator

Using npm

npm install -g @profullstack/favicon-generator
`

Usage

$3

#### Interactive Mode

Simply run the command without arguments to enter interactive mode:

`bash
fav
`

You'll be prompted for:

- SVG file path
- Output directory
- PNG quality (1-100)
- Compression level (0-9)
- Whether to generate additional favicon sizes

#### Command Line Arguments

`bash


Basic usage

fav -i favicon.svg -o ./icons

With custom quality and compression

fav -i logo.svg -o ./public/icons -q 90 -c 7

Silent mode (no output)

fav -i favicon.svg -o ./icons --silent

Skip favicon generation

fav -i favicon.svg -o ./icons --no-favicon

Show help

fav --help

Show version

fav --version
`

#### CLI Options

| Option | Alias | Description | Default |
| --------------- | ----- | ----------------------------- | --------------- |
| --input | -i | Path to SVG file | ./favicon.svg |
| --output | -o | Output directory | ./icons |
| --quality | -q | PNG quality (1-100) | 95 |
| --compression | -c | Compression level (0-9) | 9 |
| --no-favicon | | Skip additional favicon sizes | false |
| --silent | | Suppress output messages | false |
| --help | -h | Show help message | |
| --version | -v | Show version number | |

$3

#### Basic Example

`javascript
import { generateIcons } from '@profullstack/favicon-generator';

const results = await generateIcons({
svgPath: './favicon.svg',
outputDir: './icons',
});

console.log(Generated ${results.icons.length} icons);
`

#### Custom Configuration

`javascript
import { generateIcons } from '@profullstack/favicon-generator';

const results = await generateIcons({
svgPath: './logo.svg',
outputDir: './public/icons',
quality: 90,
compressionLevel: 7,
generateFavicon: true,
faviconSizes: [16, 32, 48],
verbose: true,
});

// Access generated files
results.icons.forEach((icon) => {
console.log(${icon.name}: ${icon.path});
});
`

#### Custom Icon Sizes

`javascript
import { generateCustomIcons } from '@profullstack/favicon-generator';

const customSizes = [
{ size: 48, name: 'icon-48.png' },
{ size: 96, name: 'icon-96.png' },
{ size: 144, name: 'icon-144.png' },
];

const results = await generateCustomIcons('./favicon.svg', './icons', customSizes, { quality: 95 });
`

#### Using Constants

`javascript
import { generateIcons, DEFAULT_ICON_SIZES, BACKGROUNDS } from '@profullstack/favicon-generator';

// Use default icon sizes
const results = await generateIcons({
svgPath: './favicon.svg',
outputDir: './icons',
iconSizes: DEFAULT_ICON_SIZES,
});

// Available background colors
console.log(BACKGROUNDS.transparent); // { r: 255, g: 255, b: 255, alpha: 0 }
console.log(BACKGROUNDS.white); // { r: 255, g: 255, b: 255, alpha: 1 }
console.log(BACKGROUNDS.black); // { r: 0, g: 0, b: 0, alpha: 1 }
`

API Reference

$3

Generate PNG icons from an SVG file.

Parameters:

- options (Object):
- svgPath (string, required): Path to the SVG file
- outputDir (string, required): Output directory for generated icons
- iconSizes (Array, optional): Array of {size, name} objects. Defaults to DEFAULT_ICON_SIZES
- quality (number, optional): PNG quality (1-100). Default: 95
- compressionLevel (number, optional): Compression level (0-9). Default: 9
- generateFavicon (boolean, optional): Generate additional favicon sizes. Default: true
- faviconSizes (Array, optional): Array of favicon sizes. Default: [16, 32]
- verbose (boolean, optional): Enable verbose logging. Default: true

Returns: Promise