our SVG favicon maker catches what prev">

How I Fixed a Broken Favicon Generator Process

2026-07-13 · 3 min read

A WordPress agency I work with had 60 client sites using the default WordPress favicon. Not a single one had Apple touch icons or Android manifest icons. I generated complete favicon packages for all 60 in under two hours.

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. A browser rendering a favicon might scale it to 16 pixels wide on a tab and 180 pixels wide on a splash screen — 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 SVG favicon maker 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 ICO generator →

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