Favicon Generator

Turn one logo into favicon.ico, every PNG size, Apple touch and maskable icons, the web manifest, and the head tags. In the browser or from the CLI.

The Favicon Generator is a free tool at brandstack.dev/tools/favicon-generator. Drop one logo and export the complete favicon pack a modern site ships: eleven files, correctly sized, correctly named, with the HTML to wire them up. It runs in your browser (your logo is never uploaded) and as a CLI command: same engine, same math, same filenames.

Run it from the command line (recommended for agents)

npx @brandstack/cli favicon-generator ./logo.png --out ./public

No browser, no account, no network after install. Flags mirror the page’s URL parameters exactly: --bg (background hex for the opaque icons), --theme (theme-color when it differs from the background), --pad (extra padding per side, 0 to 0.3), --name (the app name for the manifest). Add --zip for one favicon-pack.zip, run --list for the pack’s files.

Better yet, configure the tool visually and hand the CLI the link: every setting on the page encodes into the URL, and the CLI accepts that URL as an argument.

npx @brandstack/cli favicon-generator ./logo.png \
  "https://brandstack.dev/tools/favicon-generator?bg=0e0e10&pad=0.06&name=Acme" \
  --out ./public

The CLI writes the exact files the browser export produces, with the same names and the same pixels (this parity is enforced by golden-image tests in CI).

How to use it in the browser

Load a logo by dragging it onto the page, pasting it (⌘V or Ctrl+V), or clicking the dropzone. Square works best; 512px or larger keeps every size sharp
Check the in-context previews: the browser tab in light and dark, a search result row, the iOS home screen, and the maskable safe-zone circle
Pick the background color (it fills the Apple touch and maskable icons), the theme color, extra padding, and the app name the manifest carries
Click Download favicon pack (zip), or download any single file from its card
Copy head snippet puts the link tags on your clipboard; paste them into your site’s <head>

The files it exports

File	Size	Rendering
`favicon.ico`	16, 32, and 48 packed	The classic multi-size icon browsers and crawlers still request at `/favicon.ico`
`favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png`	16 to 48	Transparent tab icons; 32 is the size Google’s results pages read
`apple-touch-icon.png`	180x180	Opaque on your background color, because iOS fills transparency with black
`icon-192x192.png`, `icon-512x512.png`	192 and 512	The web manifest icons Android and installed PWAs use
`icon-maskable-192x192.png`, `icon-maskable-512x512.png`	192 and 512	Adaptive-icon variants, inset so your mark survives the circle crop
`site.webmanifest`	text	Manifest with all four icon entries plus your name and colors
`favicon-snippet.html`	text	The exact `<head>` lines that ship the pack

Every icon is your logo contain-fit and centered: never cropped, never distorted. Maskable variants inset the mark 10 percent per side (plus your padding) so it stays inside the adaptive-icon safe zone.

For AI agents

The Copy agent prompt button on the page packages a structured prompt: one npx @brandstack/cli command carrying your settings deep link, with browser-automation steps as the fallback and the underlying math for auditing
Every setting encodes into the URL (bg, theme, pad, name), so a link carries a complete setup
The tool page is also served as plain markdown at /tools/favicon-generator.md, and listed with instructions in /llms.txt

When to use this tool

You are launching and the site still shows the framework’s default favicon
You rebranded, and the tab icon is the old mark on every browser and phone
A Lighthouse or PWA audit flagged missing manifest or maskable icons
Your coding agent should regenerate the pack whenever the logo changes; one CLI line in a script does it

For the mark itself, Brand Stack keeps your full brand model (colors, type, logo, voice) in one place and applies it across every mockup and launch image it generates. This tool handles the sizes; Brand Stack handles the brand.