favseed: one SVG in, an optimised favicon set out

Your set

a padded icon under a circular mask — masked

file	bytes

Download .zip

Add to your `<head>`

What you get

logo.svg: The mark itself. Optimised, animation intact. For pages and READMEs.
icon.svg: The same optimisation plus a structural animation strip. The browser favicon, and what every raster below is rendered from.
favicon.ico: One 32x32 entry, a raw PNG in a 22-byte container.
apple-touch-icon.png: 180x180 on the chosen ground, the mark placed in the safe zone.
icon-192.png, icon-512.png: On the same ground, placed the same way. The manifest's "any maskable" icons.
site.webmanifest: Icons only. Merge your own name and theme_color.

These bytes are not the CLI's bytes

The SVGs are exact. This page runs the same svgo plugin list as the command line tool, imported from the same file, so logo.svg, icon.svg and the site.webmanifest come out byte-identical. The mark is placed in the masked icons by the same fit-and-snap search, so it lands on the same pixel. The 22-byte container of favicon.ico is the same code too, but its payload is a PNG, so the file differs by whatever the PNG differs by.

The PNGs differ, because this page still runs its own substitutes for the CLI's image engine:

stage	command line	this page
render	resvg 0.48.1, in `@napi-rs/image`	`@resvg/resvg-wasm` 2.6.2
quantise	`@napi-rs/image`'s quantiser	`image-q`, a different algorithm
recompress	oxipng, then `@gfx/zopfli` at 120 iterations	`@jsquash/oxipng` level 6 (no zopfli)

Measured over four fixtures at the defaults, PNG bytes only:

mark	CLI	here
flat, pixel grid	600 B	620 B	+3.3%
dense geometry	5343 B	5043 B	−5.6%
two-colour mark	4959 B	5079 B	+2.4%
radial gradient	25946 B	29642 B	+14.2%

Within a few percent on the three flat marks and 14.2 % larger on the gradient: the missing zopfli costs bytes, and a different quantiser can win some back, as it does on the dense mark. Close is not the same, though, and it is why this page will not tell you what your icons will weigh.

Treat this as a preview you can see and click. For bytes you can measure, reproduce and diff into git, run npx favseed logo.svg.

Your set

Add to your <head>

What you get

Add to your `<head>`