Favicon sizes: the files a website actually needs
A favicon is the small icon in the browser tab, the bookmarks bar and the search results. Generators routinely hand you twenty or thirty files. A modern website needs about five.
The short list
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 inside one file | Browser tabs, bookmarks, anything old that asks for /favicon.ico |
| favicon-32x32.png | 32×32 | Modern browser tabs |
| apple-touch-icon | 180×180 | iPhone and iPad home screen |
| icon-192.png | 192×192 | Android home screen, via the web manifest |
| icon-512.png | 512×512 | Android splash screen and installed web apps |
Optionally, an SVG favicon on top, which stays sharp at every size and can switch colours in dark mode. Everything else — the 57, 60, 72, 76, 114, 120, 144 and 152 pixel Apple sizes, the Windows tile images — is left over from devices that have been gone for years.
The HTML
Put this in the <head> of every page:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The sizes="any" on the .ico line matters: without it, Chrome can pick the .ico over a better PNG. The 192 and 512 icons are listed in the manifest's icons array rather than in the HTML.
Keep a copy of favicon.ico at the root of the site even if you link to something else. Browsers, feed readers and some crawlers request /favicon.ico directly without reading your HTML at all.
Designing something that survives 16 pixels
At 16×16 there are 256 pixels to work with. A full logo with a wordmark becomes an unreadable smudge. What works:
- One letter or one symbol, not the full logo.
- Thick shapes. A one-pixel line at 512 disappears entirely at 16.
- Strong contrast against both a white and a dark tab bar, because users run both.
- Little or no padding. The icon is already tiny; empty margin makes it tinier.
Look at the 16 pixel version at actual size before you ship it. That is what most people will see.
Transparency, and the iPhone exception
Tab icons can and usually should be transparent, so they sit cleanly on light and dark browser themes.
The Apple touch icon should not. iOS fills transparent areas in a home-screen icon with black and adds its own rounded corners, so a transparent logo usually ends up as a dark square with a logo floating in it. Give the 180 pixel icon a solid background colour and let iOS round it.
Google search results
Google shows your favicon next to your site name in mobile search. Its requirements: the icon must be square, it must be a multiple of 48 pixels (48, 96, 144, and so on), it must be crawlable, and it must be linked from the home page. A 48 pixel layer in the .ico or a 192 pixel PNG satisfies it. Changes can take weeks to appear, because Google recrawls favicons on its own schedule.
Making the set
Start from a square image at least 512 pixels across, ideally a PNG or SVG with a transparent background. Our favicon generator takes that and produces a multi-size .ico plus PNGs at 16, 32, 48, 64, 128, 180, 192 and 512 — use the ones in the table above and ignore the rest. If your logo is a vector, run it through the SVG optimizer first and you can use it directly as the SVG favicon too.
If your source is not square, square it first with the canvas resizer rather than letting the generator crop it, so no part of the mark is cut off.