The six sizes, and why only six
| File | Size | Used by |
|---|---|---|
favicon-16.png | 16 | browser tabs |
favicon-32.png | 32 | tabs on high-density screens, bookmarks |
favicon-48.png | 48 | Windows shortcuts, some browsers |
apple-touch-icon.png | 180 | iOS and iPadOS home screens |
icon-192.png | 192 | Android home screens |
icon-512.png | 512 | install prompts and splash screens |
Older guides list twenty or more files, including sizes for Windows 8 tiles and long-gone devices. Those are dead weight now. Six files and four lines of HTML cover every browser in current use.
The markup
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Put the files in the root of your site, not in a subfolder, unless you enjoy debugging why a browser requested /favicon.ico and got a 404.
The manifest is the part people skip. Without it, Android has no idea which icon to use and the 192 and 512 files sit there unused. The generator writes one with the two icons already listed; edit the name and start URL to match your site.
Designing for 16 pixels
An icon is not a logo. At 16 pixels a wordmark becomes a grey smudge and fine lines vanish.
What survives: one shape, one or two colours, thick strokes, high contrast. A single letter works. A simplified mark from your logo works. Your full logo with the company name almost never does.
The preview here shows 16 and 32 pixels at their real size for exactly this reason. If you cannot tell what it is in the small preview, neither can anyone looking at a tab with twelve others open.
Padding and corners
A little padding, five to ten percent, usually helps. Icons sit next to other icons, and a mark that runs edge to edge looks larger and cruder than its neighbours.
Rounded corners are optional here because most platforms apply their own mask. iOS rounds everything regardless. Set a radius only when you want the shape visible on platforms that do not, such as a browser tab.
Questions
Which sizes do I actually need?
Six. 16 and 32 for browser tabs and bookmarks, 48 for Windows shortcuts, 180 for iOS home screens, and 192 and 512 for Android and install prompts. The long lists of twenty-odd sizes you find elsewhere are largely historical.
Do I still need a favicon.ico?
Only for very old browsers, and for requests to /favicon.ico that arrive before any HTML is parsed. A 32 px PNG declared in the HTML covers every current browser.
Why a manifest file?
Without one the 192 and 512 icons are never used. It is what tells Android and install prompts which icon to show, so the generator writes one alongside the images.
Should the icon have padding?
Usually a little. A logo that fills the square edge to edge looks cramped next to icons that do not, and rounded platforms may clip the corners.
Is my logo uploaded?
No. The image is decoded and redrawn in your browser, and the downloads are produced there too.