Do I still need favicon.ico?

Yes, as a fallback. Some browsers, feed readers and older tools request /favicon.ico automatically without reading a link tag. Ship it at the site root with 16, 32 and 48 pixel versions inside one file.

What size should the Apple touch icon be?

180×180 pixels, fully opaque. iOS composites transparency onto a background, so a see-through PNG can render with an unexpected border. Do not round the corners yourself; iOS applies its own mask.

Can I use an SVG favicon and skip the PNGs?

An SVG favicon scales cleanly and modern Chrome and Firefox support it, but Safari and older browsers need a raster fallback. SVG is an addition, not a replacement.

Do I need a web app manifest for a normal website?

Only if you want Android home-screen icons and a proper install prompt. If you are building a PWA the manifest is required. A plain marketing site can ship the icons without one.

What is a maskable icon?

A PNG with the important artwork inside a centred circle that fills 80 percent of the canvas, so Android can crop it into any shape without clipping your logo.

The favicon files every site needs (and what you can skip)

A favicon is one of the few assets that touches every browser, every bookmark list and every “add to home screen” prompt. It is also one of the most commonly half-shipped. Most sites either drop a single favicon.ico and stop, or paste in a fifteen-file snippet from a generator they no longer understand.

The short version: six files cover every surface that matters. Everything past that is insurance, not a requirement.

The full list

File	Size	Who reads it
`favicon.ico`	16, 32 and 48 in one file	Requested automatically at `/favicon.ico` by legacy browsers, feed readers and some tools
`favicon-32x32.png`	32×32	Browser tabs on standard displays, bookmarks
`favicon-16x16.png`	16×16	Tab favicon on older or low-DPI setups
`apple-touch-icon.png`	180×180	iOS home screen and Safari bookmarks
`icon-192.png`	192×192	Android home screen, PWA installs
`icon-512.png`	512×512	Android splash screen and install prompt
`maskable-icon-512.png`	512×512	Android adaptive icon (optional but cheap)
`site.webmanifest`	—	Ties icons, name and theme color together for Android and PWA

Eight rows, but two of them are optional and the manifest is one small JSON file. In practice you are producing six images and one config file.

The link tags

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0b0b0c">

The sizes="any" on the .ico line matters more than it looks. It tells modern browsers “this file is a last resort, prefer the PNGs listed below”. Without it, Chrome may pick the small .ico even when a better PNG is right there.

What you can skip

A separate 48×48 PNG. Fold it into the multi-resolution .ico instead.
Separate android-chrome-192x192 and android-chrome-512x512 names. The manifest points at whichever files you have.
safari-pinned-tab.svg unless you actually want the monochrome pinned-tab mask in macOS Safari. It is a single-color silhouette, not your logo.
mstile tiles and browserconfig.xml. Modern Edge reads the manifest.
A dozen auto-generated sizes. Browsers downscale well from 32px, so you do not need 57, 72, 96 and 114 pixel variants.

The sizes that actually matter

Two of them: 32×32 for the tab, and 180×180 for iOS. Those are the ones visible in daily use. Draw at 512 and export down, and the rest are cheap.

For the maskable icon, keep the artwork inside the central circle that fills 80% of the canvas. Android crops the outer ring into a circle, a squircle or a rounded square, and anything in that ring can be cut.

Common mistakes

One 16px image stretched everywhere. A small source file gets upscaled on HiDPI tabs and on iOS, and it looks soft. Start from a 512×512 master.

Rounding the corners of the Apple touch icon. iOS applies its own mask, so pre-rounded corners get double-masked and show dark notches at the edges. Ship a plain square.

A transparent Apple touch icon. iOS composites transparent areas onto a background, which can produce a black or white halo around your mark. Fill the square.

Serving icons from a subfolder without updating the paths. Every URL above assumes the files sit at the site root. Move them and the links break quietly.

Dropping a manifest that lists missing files. One bad icon path in site.webmanifest can make Android fall back to a generic icon. Keep the manifest in sync with the files you actually ship.

Changing an icon but never versioning it. Browsers cache icons hard. If you want the new file to appear, you have to change the cache key — that is a separate problem, covered through the favicon checker and the generator.

Where this tool fits

The favicon generator takes one square image and exports the whole set, the link tags above and the manifest in a single ZIP. It runs entirely in your browser. After you deploy, run the URL through the favicon checker to confirm every file resolves.