Favicon generation

The generator is not a black box behind an API: it is a small set of ES modules which run in any modern browser. You can import them in your own pages, tools or headless test runs.

Why no hosted generation API?

Rendering icons needs a graphics stack (SVG rasterization, Canvas, compression). Browsers already ship an excellent one, so EasyFaviconGenerator uses it: your pictures are never uploaded, and there is nothing to rate limit. If you need an automated pipeline, run the engine in a headless browser (Playwright, Puppeteer, Edge or Chrome in headless mode).

Using the engine

The modules live in assets/js/lib/ and have no dependencies. Load them from a page served over HTTP(S) (ES modules do not work from file://).

import { masterFromSvgText, masterFromFile } from 'https://easyfavicongenerator.com/assets/js/lib/icon-model.js';
import { initSettings, generateFavicon } from 'https://easyfavicongenerator.com/assets/js/lib/generate.js';
import { packageFor, zipBytes } from 'https://easyfavicongenerator.com/assets/js/lib/frameworks.js';

// 1. A master picture: SVG text, or a File (SVG, PNG, JPEG, WebP)
const master = await masterFromSvgText(await (await fetch('logo.svg')).text(), 'logo.svg');

// 2. Settings, with the same defaults as the website
const settings = initSettings();
settings.path = '/';
settings.icon.webAppManifest.name = 'My site';

// 3. Generate
const result = await generateFavicon(master, settings);
console.log(result.html);          // the HTML markup to paste in the <head>
for (const f of result.files) {    // { name, data (string | Uint8Array), mime, size, description }
  console.log(f.name, f.size);
}

// 4. Optional: framework specific layout and instructions
const pkg = packageFor('nextjs', result, settings);
console.log(pkg.zipFiles.map(f => f.path), pkg.steps);

Settings reference

Setting	Default	Description
`path`	`"/"`	URL path where the files will be served.
`version`	`undefined`	Appended as `?v=...` to every URL.
`skipMetadataInjection`	`false`	Do not add the "created by" marker to the PNG and SVG files.
`compression`	`"lossless"`	`none`, `lossless` or `lossy` (256 colors).
`scaling`	`"smooth"`	`smooth`, `lanczos` or `nearest` (bitmap pictures).
`icon.desktop.regularIconTransformation`	none	`{ type: 'none' \| 'background' \| 'brightness' \| 'invert', imageScale, backgroundColor, backgroundRadius, brightness }`
`icon.desktop.darkIconType`	`"none"`	`none`, `regular` (derive from the regular icon) or `specific` (use `darkIcon`).
`icon.touch.*`	background (#fff, scale 0.8)	Apple Touch icon: opaque `transformation` by default, `appTitle`, optional `icon` master.
`icon.webAppManifest.*`	background (#fff, scale 0.7), purpose maskable	`name`, `shortName`, `themeColor`, `backgroundColor`, `display`, `orientation`, `purpose`, opaque padded `transformation` by default, optional `icon`.
`legacy.windows.*`	disabled	Windows tiles and `browserconfig.xml`.
`legacy.safariPinnedTab.*`	disabled	Traced monochrome `safari-pinned-tab.svg`.

Generated files

favicon.svg: SVG favicon, with a prefers-color-scheme dark variant when requested.
favicon-96x96.png: PNG favicon, for browsers and Google.
favicon.ico: classic ICO with 48, 32 and 16 pixel images (32-bit BMP/DIB + AND mask).
apple-touch-icon.png: 180x180.
web-app-manifest-192x192.png, web-app-manifest-512x512.png and site.webmanifest.
Optional: mstile-*.png, browserconfig.xml, safari-pinned-tab.svg.

See the change log for the evolutions of the package, and the FAQ for the meaning of each option.