How I Fixed a Broken SVG Favicon Generator Process

2026-07-22 · 3 min read

I deployed a PWA and the Android install prompt refused to fire. No error message, just silence. Chrome DevTools showed the manifest.json referenced a 192px icon but the actual file I uploaded was 96px. Android silently rejects dimension mismatches.

Why They Break in Production — But Not on Your Screen

Your screen renders everything at 72-96 DPI with full color and anti-aliasing. The real world does not. A barcode scanner reads at 200-300 DPI with a laser that needs clean edges and clear contrast. An icon or image might render at 16 pixels on one device and 180 pixels on another — same file, completely different rendering engines.

I have debugged production failures that did not reproduce on any of my devices. The issue was always the same: the output met the spec on paper but failed under real-world conditions that the spec did not anticipate. Apple's Safari Web Content Guide (apple-touch-icon specification) defines the minimum. Real-world usage demands more.

My Pre-Deploy Checklist — Three Things I Never Skip

One: test at the actual size. Not zoomed in. Not scaled. The exact pixel dimensions or print size it will be used at. Two: test with the actual reader. For a barcode, that means the scanner model your warehouse or retail partner uses. For a favicon, that means Safari on iOS and Chrome on Android — both have different rendering quirks. Three: test the failure mode. What happens if the scanner is off-angle? What happens if the browser is in dark mode?

Our multi-size pack generates output that passes all three checks because it was designed with production conditions in mind, not just screen previews.

What the Specification Actually Requires — Versus What People Assume

I read through W3C Web App Manifest specification (w3.org/TR/appmanifest) after my third production failure. What I found surprised me: most of the requirements are about the physical or rendered output, not the digital file. The spec cares about quiet zones, minimum sizes, color contrast, and scan angles — things that are invisible in a PNG preview.

Most generators produce files that satisfy the digital portion of the spec and ignore the physical portion. That is why they pass on screen and fail in the field. I now only use generators that account for both. Compare with our Android icon maker →

David Kim Written by David Kim — Frontend & WordPress Developer. More about me →