fess-icons
v1.0.2
Published
Generate a full platform icon set (favicons, Apple touch icon, Android adaptive/maskable, PWA manifest icons, social/OG images) from one source image, in one command.
Downloads
36
Maintainers
rajpoluReadme
fess-icons
One command, one source image, the entire platform icon set — favicons, Apple touch icon, Android adaptive/maskable, PWA manifest icons, and optional social/OG images. Built for build pipelines, not web forms.
Made to pair with Fess, the visual icon/logo designer — design there, export your source PNG/SVG, then wire it into npm run build here so regenerating icons after a rebrand is one command instead of a re-upload to a website.
Why
Every "icon generator" on the web is a page you visit, upload to, and download a zip from — by hand, every time your logo changes. fess-icons is a CLI so it can live in package.json scripts and CI, and never go stale.
Usage
npx fess-icons generate ./logo.png --name "My App" --theme "#0a84ff"With Android adaptive icon padding, favicons, Apple touch icon, and a ready-to-paste <head> snippet + manifest, all in ./fess-icons-output by default.
Options
| Flag | Default | Description |
|---|---|---|
| --out <dir> | ./fess-icons-output | Output directory |
| --name <name> | App | App name, written into manifest.webmanifest |
| --theme <#hex> | #000000 | Theme color for manifest + <meta name="theme-color"> |
| --bg <#hex> | #FFFFFF | Background for social/OG images (transparency isn't safe there) |
| --no-android | — | Skip the Android adaptive/maskable icon |
| --social | off | Also generate a 1200×630 OG image and a 512×512 social avatar |
What you get
fess-icons-output/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── apple-touch-icon.png
├── notification-badge-96.png
├── manifest.webmanifest
├── head-snippet.html ← paste into <head>, done
├── icons/
│ ├── icon-72.png ... icon-512.png
│ └── icon-maskable-512.png ← real safe-zone padding, won't clip on Android
└── social/ (only with --social)
├── og-1200x630.png
└── avatar-512.pngWhy the padding matters
Android applies its own mask (circle, squircle, rounded square — varies by launcher) over adaptive icons. A "full bleed" 512×512 export gets clipped unpredictably depending on the device. fess-icons insets the maskable icon by 20% automatically so your logo survives every mask shape. Most generators skip this and ship icons that get cropped on real phones.
CI example
- run: npx fess-icons generate ./brand/logo.svg --name "${{ env.APP_NAME }}" --theme "#0a84ff" --socialRebrand once, regenerate everywhere — no manual re-upload to a website ever again.
Programmatic use
const { generateAll } = require('fess-icons/src/render');
const { allTargets } = require('fess-icons/src/targets');
await generateAll('./logo.png', './dist/icons', allTargets({ social: true }), {
background: null, // transparent; pass a hex string for opaque
});License
MIT