npm package: @gizmo-v-nk/favicon-generator
Description: A simple CLI tool to generate favicon and PWA icons from a single source image. Creates multiple icon sizes for web, iOS, and Android.
Author: gizmo.verindipencil
Latest version: 1.1.0

# 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)

```bash
npm install --save-dev favicon-generator
# or
pnpm add -D favicon-generator
# or
yarn add -D favicon-generator
```

### Global installation

```bash
npm install -g favicon-generator
```

## Usage

1. Place your source icon as `public/source-icon.png` in your project root (default)
   - The source image should be square and high resolution (at least 512x512px recommended)
   - PNG format is recommended

2. Run the generator:

```bash
# 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/icons
```

The tool will create the output directory if it doesn't exist.

3. The following files will be generated in the `public/` directory:
   - `favicon.ico` - Multi-resolution .ico file (16x16, 32x32)
   - `favicon-16x16.png` - 16x16 favicon
   - `favicon-32x32.png` - 32x32 favicon
   - `apple-touch-icon.png` - 180x180 Apple touch icon
   - `android-chrome-192x192.png` - 192x192 Android Chrome icon
   - `android-chrome-512x512.png` - 512x512 Android Chrome icon
   - `android-chrome-maskable-512x512.png` - 512x512 maskable icon

## HTML Integration

Add the following to your HTML `<head>` section:

```html
<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`:

```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:
- [jimp](https://www.npmjs.com/package/jimp) - Image processing
- [to-ico](https://www.npmjs.com/package/to-ico) - .ico file generation

## License

MIT