Zero-Dependency Favicon Generation with Canvas API — Build Your Own in 50 Lines

Every React project I've worked on eventually adds a favicon generation dependency. favicons alone pulls in sharp, which pulls in native binaries, which breaks on that one teammate's M1 Mac and eats 15 minutes of your afternoon. I got tired of it and built a zero-dependency favicon generator using nothing but the Canvas API. It ships all six sizes you need for a modern web app in under 50 lines.

What You Actually Need in 2026

The minimum favicon set has grown. Here's what covers every major browser and platform:

That's six files. Most generators create 15+ — including manifest.json, browserconfig.xml, and sizes no one uses anymore. You don't need the bloat.

The Canvas API Approach

The trick is that Canvas can render SVG paths (via Path2D) and then export to PNG at any resolution. No DOM, no fonts, no external libraries.

function generateFaviconSet(svgPathData, color = '#1e293b') {

  const sizes = [

    { name: 'favicon-16.png', w: 16 },

    { name: 'favicon-32.png', w: 32 },

    { name: 'apple-touch-icon.png', w: 180 },

    { name: 'icon-192.png', w: 192 },

    { name: 'icon-512.png', w: 512 },

  ];

  const canvas = document.createElement('canvas');

  const ctx = canvas.getContext('2d');

  sizes.forEach(({ name, w }) => {

    canvas.width = w; canvas.height = w;

    ctx.clearRect(0, 0, w, w);

    const scale = (w * 0.8) / 100;

    const offset = w * 0.1;

    ctx.save();

    ctx.translate(offset, offset);

    ctx.scale(scale, scale);

    const path = new Path2D(svgPathData);

    ctx.fillStyle = color;

    ctx.fill(path);

    ctx.restore();

    const link = document.createElement('a');

    link.download = name;

    link.href = canvas.toDataURL('image/png');

    link.click();

  });

}

The key insight: Canvas's Path2D constructor accepts the exact same path data string as SVG's d attribute.

Why Not Use toBlob()?

toBlob() would be more memory-efficient, but it's asynchronous and creates event-handling complexity. For favicon-sized images (max 512×512), toDataURL() keeps the code synchronous and readable.

One Click → ZIP of All Sizes

Wrapping this into a proper tool means adding JSZip for packaging. I built exactly that at does the same thing with a drag-and-drop UI.

Code snippets in this article are MIT-licensed.