A favicon isn't really one image — it's a small set of images at different sizes, because a browser tab, a phone's home screen and a bookmarks bar all display icons differently. Get the sizes right and your icon looks crisp everywhere; skip them and it looks soft or blurry on some devices.
The Core Sizes
| Size | Where it's used |
|---|---|
| 16×16 | Classic browser tab icon |
| 32×32 | Higher-resolution tab icon, taskbar shortcuts |
| 48×48 | Windows site shortcuts |
| 180×180 | Apple touch icon (iPhone/iPad home screen) |
| 192×192 | Android home screen and PWA icon |
| 512×512 | Larger PWA/app icon, splash screens |
Most favicon generators, including Favicon Generator, produce this full set from one source image so you don't need to resize each one manually.
Why So Many Sizes?
- Browser tabs are tiny, so a 16×16 or 32×32 icon is enough and keeps the request small.
- Phone home screens show icons much larger when someone saves your site — a small tab icon stretched up to that size looks blurry.
- Retina and high-density screens render everything sharper, so a slightly larger source image avoids a soft look even at "small" display sizes.
Preparing Your Source Image
Start from a source image at least 512×512 pixels, ideally your logo's symbol rather than a full wordmark. Generators scale down from this master image to create each smaller size, so starting larger and simpler gives a cleaner result at every size than starting small and stretching up.
The Files You'll Typically End Up With
favicon.ico— the classic multi-size icon file browsers have used for yearsfavicon-32x32.pngandfavicon-16x16.png— modern browser tab iconsapple-touch-icon.png(180×180) — for iPhone/iPad home screensandroid-chrome-192x192.pngandandroid-chrome-512x512.png— for Android and installable web apps
Adding Them Correctly
In your site's <head>, each size is typically referenced with its own tag, for example:
``html <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> ``
Most CMS platforms handle this automatically once you upload the icon in their settings — you rarely need to write these tags by hand unless you manage the HTML directly.
Testing Across Devices
- Check the browser tab on desktop and mobile browsers.
- On an iPhone, try "Add to Home Screen" and check the icon that appears.
- On Android, do the same from Chrome's menu.
- Clear your browser cache if an old icon still appears — favicons are cached aggressively.
Getting this set right is a small piece of a site's overall polish, alongside the basics covered in how to create a favicon for your website.
