Why one file isn't enough
It's tempting to think a single large, high-resolution image should cover every use case — after all, browsers can resize images on the fly. In practice, shrinking one large icon down to 16×16 pixels tends to look muddy, because fine detail that reads fine at full size turns into indistinct noise at icon size. Generating each size independently from the original, rather than scaling one small master copy down further, keeps every size sharp regardless of how small it ends up.
The sizes that actually matter
| Size | Used for |
|---|---|
| 16×16 | Browser tabs and bookmark bars |
| 32×32 | Taskbar shortcuts and higher-density tab displays |
| 48×48 | Windows site shortcuts and some browser UI |
| 180×180 | Apple touch icon — shown when someone adds your site to an iPhone/iPad home screen |
| 192×192 | Android home screen icon |
| 512×512 | Android/PWA splash screens and app store style listings |
Each one exists for a specific display context, not out of redundancy — the tiny sizes show up where screen space is at a premium, while the larger ones are what mobile operating systems use when your site starts behaving like an installed app rather than a browser tab.
Where the files actually go
Once you have the sizes, they're referenced from the <head> of your HTML, typically placed in your site's root folder so the paths are simple:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
Modern browsers all support PNG favicons directly, so there's no real need for the older .ico format most sites used to require.
What if my source image isn't square?
Center-crop it to a square before resizing, rather than squashing or stretching it — a non-square icon distorted to fit will look wrong at every size, while a clean center crop preserves the important part of the image (usually a logo or mark) without warping it.
Try it yourself
The Favicon & App Icon Generator does all of this in one step — upload one image, and it generates every size above (center-cropped automatically if needed), packaged as a zip with the exact HTML snippet to paste into your site.