The First Thing I Check With Favicon Generator Now

2026-08-14 · 3 min read

I was auditing a Shopify store's Core Web Vitals and found 404 errors on /apple-touch-icon.png and /favicon-32x32.png — two icons that did not exist but browsers kept requesting. Every missing request added 200ms of blocking time. I was auditing a Shopify store's Core Web Vitals and found 404 errors on /apple-touch-icon.png and /favicon-32x32.png — two icons that did not exist but browsers kept requesting. Every missing request added 200ms of blocking time. Before I walk through the workflow, one thing worth stating plainly: Apple's Safari Web Content Guide is the reference I keep coming back to, and it is why the steps below are grounded rules rather than habits. Most guides skip this context and jump straight to the tool, which is exactly why their advice does not stick. Here is what I actually do, and why each step earns its place.

The One Parameter Most People Skip — And Pay For Later

Every generator has a setting that looks optional but is not. For barcodes, it is the quiet zone — the blank margin around the symbol. Leave it out and the scanner cannot find where the barcode starts and ends. For favicons, it is the background handling — a transparent icon on a dark bookmark bar turns into an invisible smudge.

I check this parameter before every export. According to W3C Web App Manifest specification, it is not optional — it is part of the specification. Generators that let you skip it are doing you a disservice.

The parameter is easy to ignore because it does not affect how the file looks on screen. It only affects whether the file works in the real world. That invisibility is exactly why it causes so much silent failure.

Not All Types Work the Same Way — Here Is the Split

People search for a generator, pick the first result, type something in, and hit download. That is fine if you are making a one-off label for a personal project. It is a disaster if you are printing labels for a supply chain or deploying icons to a production website.

Every type exists for a reason. Apple's Safari Web Content Guide defines distinct use cases, and using the wrong type for your scenario is worse than using no type at all — because a wrong type that scans successfully gives you false confidence. I have seen shipments get rejected at receiving docks because someone used a generic format when the receiver required a registered one.

The cost of guessing wrong is rarely visible on the day you generate the file. It shows up weeks later, when a scanner refuses to read a label or an iPhone shows a blank square. That lag is why so many people make the same mistake once.

What the Specification Actually Requires — Versus What People Assume

I read through W3C Web App Manifest specification 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 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.

Apple touch icon tool is one of the few that handles both sides. It generates the digital file correctly and respects the physical constraints the destination needs, which is why I recommend it after my own failures.

At the end of the day, the goal is an output you do not have to worry about. If a single step here saves you one redo, it was worth the read. I keep W3C Web App Manifest specification bookmarked for the days I doubt myself, and I run my checks on every export before it ships.
David Kim Written by David Kim — Frontend & WordPress Developer. More about me →