Which favicon sizes do you actually need?

Search for favicon sizes and you'll find lists of twenty or more files: Apple icons at 57, 72, 114, 144 and 152 pixels, Windows tile images, a Safari pinned tab icon, PNGs at 16, 32 and 96. Most of that is left over from browsers and phones nobody uses anymore.

Today six files cover every current browser and phone, plus a small manifest that points to three of them.

The six files

favicon.ico at 32 × 32 pixels (often with a 16 and 48 inside). Browsers ask for /favicon.ico on their own, and some tools, like feed readers, never look anywhere else.
icon.svg, any size. Current browsers use it for the tab icon, and it stays sharp on every screen. Chrome, Firefox and Edge have supported SVG favicons for years, and Safari added them in version 26.
apple-touch-icon.png at 180 × 180. The icon an iPhone or iPad shows when someone adds your site to their home screen.
icon-192.png at 192 × 192, for Android home screens.
icon-512.png at 512 × 512, for Android splash screens and install prompts.
icon-mask.png at 512 × 512, a "maskable" version for Android, with extra space around the logo so it survives being cropped to a circle.

The last three are listed in a web manifest, a small JSON file. You don't need to build an app to have one. Browsers read it for the icons either way.

The HTML

Four lines in the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

The sizes="32x32" on the ICO line looks unnecessary, but it isn't. Without it, Chrome can pick the ICO over the SVG.

The manifest looks like this:

{
  "name": "My website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

What you can leave out

Apple touch icons in several sizes. iOS takes the 180 px file and scales it down for older devices.
Separate favicon-16x16.png and favicon-32x32.png links. The ICO and the SVG already cover tab icons.
The msapplication tile tags and browserconfig.xml. Those were for pinned sites on Windows 8 and 10 Start screens.
The mask-icon link for Safari pinned tabs. Recent Safari versions use the regular favicon instead.

None of these break anything if they're already on your site. They're just extra requests and files to keep in sync.

Transparent or not?

A transparent favicon sits on whatever color the browser tab is. That's usually what you want, but browsers have light and dark themes, so check that your logo works on both. A dark logo on a dark tab disappears.

If your logo is an SVG, you can make it switch colors with a media query inside the file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #101010; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="…"/>
</svg>

Not every browser honors it, so make sure the light version is still readable on a dark tab.

Home screen icons are different. iOS fills any transparent area of the touch icon with black, and Android crops icons to its own shapes. Give those icons a solid background and some padding around the logo. For the maskable icon, keep the logo inside the central 80 percent. Android may cut off anything outside that circle.

What Google uses in search results

Google shows your favicon next to your site in search results. It needs to be square, and Google recommends larger than 48 × 48 pixels so it looks sharp. Keep the URL the same over time, since Google can take a while to pick up a new one.

Common mistakes

The favicon won't update. Browsers cache favicons for a long time, sometimes longer than anything else on the site. Change the file name, or add a version to the URL, like favicon.ico?v=2, and update the link.

favicon.ico isn't at the root. If you keep your icons in a folder, still put a copy of favicon.ico at the top level of your site, next to the home page.

The logo is too detailed. At 16 pixels, a wordmark turns into a smudge. Use just the symbol from your logo, or a single letter, for the small sizes.

The touch icon is transparent. It shows up with a black background on iPhones. Fill it.

Making the files

You can make all of them from one logo with the favicon generator. Drop in an SVG or a large square PNG, choose a background color for the home screen icons, and it draws all six files, writes the manifest and gives you the four lines of HTML. You can preview the result in light and dark browser tabs and on iPhone and Android home screens before downloading. Your logo never leaves your device.

If you use WordPress, its Site Icon setting under Settings, then General, covers the PNG icons. It doesn't make an SVG or maskable icon, so the generator is worth it if you want the full set.

Responsive image converter

Font subsetter

SVG optimizer

Favicon generator