# @docyrus/logo-asset-generator
Generate favicon and app icons from a PNG/SVG logo, update your `index.html` with the correct ``/`` tags, and create/update a `manifest.json` — all in one command.
- Input: Local file path or URL to a logo (PNG or SVG, ideally 512x512)
- Output: Common favicon/app icon set (+ `favicon.ico`) and updated HTML meta tags
- HTML: Rewrites icon-related tags in your `index.html` and ensures PWA manifest icons
## Features
- Generates PNG assets:
- `favicon-16x16.png`, `favicon-32x32.png`, `favicon-96x96.png`
- `android-chrome-192x192.png`, `android-chrome-512x512.png`
- `apple-touch-icon.png` and explicit sizes: `60x60`, `76x76`, `120x120`, `152x152`, `180x180`
- `mstile-150x150.png`
- Social preview: `og-image.png` (1200x1200)
- Generates `favicon.ico` from available favicon sizes (includes 16 and 32 by default)
- Updates `index.html` `` with:
- `` for `.ico` and PNG sizes (16, 32, 96)
- `` variants
- ``
- ``
- ``
- ``
- OpenGraph image tags for `og-image.png`
- Creates/updates `manifest.json` (in same directory as `index.html`) with Android icon entries
## Requirements
- Node.js 18+ (sharp 0.33+)
## Installation
Using pnpm (recommended):
```sh
pnpm add -D @docyrus/logo-asset-generator
```
## CLI Usage
```sh
logo-asset-generator --logo --index [--output ]
```
- `--logo, -l` (required): Path or URL to PNG/SVG logo (ideally 512x512)
- `--index, -i` (required): Path to `index.html` to update
- `--output, -o` (optional): Output directory for generated assets
- Defaults to the directory of `index.html`
Examples:
- Minimal:
```sh
logo-asset-generator -l ./public/logo.svg -i ./public/index.html
```
- Custom output directory:
```sh
logo-asset-generator -l https://example.com/logo.png -i ./apps/web/public/index.html -o ./apps/web/public
```
Monorepo execution (from repo root) with pnpm workspace filter:
```sh
pnpm -w --filter @docyrus/logo-asset-generator exec logo-asset-generator \
-l ./apps/test/public/logo.svg \
-i ./apps/test/public/index.html \
-o ./apps/test/public
```
## What gets generated
In the output directory (`--output` or the directory of `index.html`):
- PNG icons listed in Features
- `favicon.ico` (ico contains 16x16 and 32x32 PNGs by default)
- Updated `index.html` (icon/meta tags replaced under ``)
- `manifest.json` created/updated with Android icon entries
Note: Existing icon-related `` tags and `og:image` meta tags in `index.html` will be removed and regenerated.
## Programmatic API
ESM import (Node 18+):
```ts
import { generateAssets, updateHtmlMetaTags, loadImage, downloadImage } from '@docyrus/logo-asset-generator'
await generateAssets({
logoPath: './public/logo.svg',
htmlPath: './public/index.html',
// outputDir: './public', // optional, defaults to dirname(htmlPath)
// sizes: [ { name: 'favicon-16x16.png', size: 16 }, ... ] // optional
})
```
Types:
```ts
interface AssetSize {
name: string
size: number
purpose?: string // e.g. 'og' for social preview image
}
interface GeneratorOptions {
logoPath: string
htmlPath: string
outputDir?: string
sizes?: AssetSize[]
}
```
Customize sizes (advanced):
```ts
import { generateAssets } from '@docyrus/logo-asset-generator'
await generateAssets({
logoPath: './logo.png',
htmlPath: './index.html',
sizes: [
{ name: 'favicon-16x16.png', size: 16 },
{ name: 'favicon-32x32.png', size: 32 },
{ name: 'android-chrome-192x192.png', size: 192 },
{ name: 'android-chrome-512x512.png', size: 512 },
{ name: 'og-image.png', size: 1200, purpose: 'og' },
],
})
```
## Notes
- Input SVGs are rasterized to PNG at the target sizes via sharp.
- The tool writes to disk and mutates `index.html`; commit changes as needed.
- `manifest.json` is created if missing; otherwise only its `icons` array is overwritten.
- Default theme and tile color are set to `#ffffff`.
## License
MIT © Docyrus, Inc.