Written by David Kim — Frontend & WordPress Developer. More about me →
I used to think generating these was straightforward — pick a type, enter the data, export. Then I had a situation that changed my mind. 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.
The root cause was not the tool. It was that I did not understand what the destination actually needed. Apple's Safari Web Content Guide (apple-touch-icon specification) spells out the requirements clearly, but most generators do not enforce them. They let you generate something that looks right on screen and fails in the real world. That gap — between what looks right and what actually works — is where most problems live.
I stopped treating generation as a one-click task and started treating it as a two-step process: configure, then verify. The configuration step is where I match the type and parameters to the actual destination. The verification step is where I test the output in conditions that match the real world — not just on my screen.
Our Apple touch icon tool handles the configuration complexity so I focus on verification. The ICO generator is especially useful for this workflow.
Test with the actual reader — not your eyes. If it is a barcode, scan it with the same scanner model your recipient uses. If it is a favicon, add it to a test site and check it on an actual iPhone and Android device. The simulator lies. The real device does not.
I also test the edge case: what happens at minimum size? What happens on a slow connection? What happens when the background is the wrong color? If it passes all three, it is ready.
Written by David Kim — Frontend & WordPress Developer. More about me →