You upload a crisp logo, generate a favicon, and it looks perfect in the browser tab. Then someone adds your site to their iPhone home screen and the icon is a blurry, cropped mess. This isn't a bug in your image -- it's because "favicon" quietly grew into a set of different files with different jobs, and most sites only cover one of them.
One file, one job, historically
The original favicon.ico was small on purpose. Browser tabs in the early 2000s displayed icons at 16x16 pixels, later 32x32 for higher-density displays. A single .ico file could even bundle both sizes inside it, since ICO is technically a container format that can hold multiple images at different resolutions -- the browser just picks the one it needs.
That worked fine as long as the only place your icon appeared was a browser tab.
Where icons show up now
Today the same logo needs to work in a lot more contexts, each expecting its own size and sometimes its own file:
- Browser tabs and bookmarks bars: 16x16 or 32x32
- iOS "Add to Home Screen": a 180x180 apple-touch-icon, displayed full-size with iOS applying its own rounded corners
- Android home screen and app switcher: 192x192 and 512x512 icons, referenced from a web app manifest
- Windows pinned tiles and some browser start pages: larger square sizes again
If you only generate and link a 32x32 favicon.ico, the browser tab looks fine because that's exactly the size it needed. But iOS and Android have nothing appropriately sized to pull from, so they either scale that tiny image up (blurry) or fall back to a screenshot of your page, which usually looks worse.
Why scaling up breaks it, not just resizing
A 32x32 image has 1,024 pixels of actual information in it. Stretching it to 180x180 doesn't add detail -- it just makes each existing pixel bigger, which is what produces the soft, blocky look people describe as "blurry." There's no way to fix this after the fact by resizing; the fix is generating each target size from a high-resolution source image, so every size gets real detail instead of interpolated guesses.
This is also why simple logos with bold shapes tend to survive small favicon sizes better than detailed illustrations or thin text -- at 16x16, fine detail just isn't rendering, no matter how good the source file is.
SVG as the newer option
Modern browsers also support SVG favicons, which sidestep the size problem entirely since vector graphics scale to any resolution without quality loss. The catch is you still need PNG or ICO fallbacks for platforms and older browsers that don't support SVG icons yet, so it doesn't replace the multi-size approach -- it just adds one more file to the set.
Getting it right without doing it five times
The reliable approach is to start from one large, high-resolution source image and generate every size you need from it in one pass, rather than manually resizing a small icon down (or worse, up) for each platform. The Favicon Generator takes a single image and produces the set of favicon files sized for browsers, iOS, and Android, so you're not guessing which sizes actually matter.