@docyrus/logo-asset-generator
v0.3.2
Published
CLI tool to generate favicon and app icons from a source logo
Readme
@docyrus/logo-asset-generator
Generate favicon and app icons from a PNG/SVG logo, update your index.html with the correct <link>/<meta> 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.htmland ensures PWA manifest icons
Features
- Generates PNG assets:
favicon-16x16.png,favicon-32x32.png,favicon-96x96.pngandroid-chrome-192x192.png,android-chrome-512x512.pngapple-touch-icon.pngand explicit sizes:60x60,76x76,120x120,152x152,180x180mstile-150x150.png- Social preview:
og-image.png(1200x1200)
- Generates
favicon.icofrom available favicon sizes (includes 16 and 32 by default) - Updates
index.html<head>with:<link rel="icon" ...>for.icoand PNG sizes (16, 32, 96)<link rel="apple-touch-icon" ...>variants<link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/mstile-150x150.png"><meta name="theme-color" content="#ffffff">- OpenGraph image tags for
og-image.png
- Creates/updates
manifest.json(in same directory asindex.html) with Android icon entries
Requirements
- Node.js 18+ (sharp 0.33+)
Installation
Using pnpm (recommended):
pnpm add -D @docyrus/logo-asset-generatorCLI Usage
logo-asset-generator --logo <path-or-url> --index <path-to-index.html> [--output <output-dir>]--logo, -l(required): Path or URL to PNG/SVG logo (ideally 512x512)--index, -i(required): Path toindex.htmlto update--output, -o(optional): Output directory for generated assets- Defaults to the directory of
index.html
- Defaults to the directory of
Examples:
- Minimal:
logo-asset-generator -l ./public/logo.svg -i ./public/index.html - Custom output directory:
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:
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/publicWhat 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<head>) manifest.jsoncreated/updated with Android icon entries
Note: Existing icon-related <link> tags and og:image meta tags in index.html will be removed and regenerated.
Programmatic API
ESM import (Node 18+):
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:
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):
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.jsonis created if missing; otherwise only itsiconsarray is overwritten.- Default theme and tile color are set to
#ffffff.
License
MIT © Docyrus, Inc.