The standard favicon size is 32×32 pixels for browser tabs, with 16×16 inside favicon.ico as a fallback. Most websites also need a 180×180 Apple touch icon and, if the site can be installed as a web app, 192×192 and 512×512 PNG icons.
Favicon Sizes at a Glance
16×16 — browser tab on standard screens (inside favicon.ico) 32×32 — browser tab on high-density screens, taskbar shortcuts (PNG or inside favicon.ico) 48×48 — Google Search results (any multiple of 48: 48, 96, 144) 180×180 — Apple touch icon for iPhone and iPad home screens (PNG) 192×192 — Android home screen and PWA install icon (PNG, in manifest) 512×512 — PWA splash screen and install prompts (PNG, in manifest) Any size — SVG favicon for modern browsers (scales to every size)
The HTML to Add Them
<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 manifest file then lists the 192×192 and 512×512 PNGs. Keep favicon.ico at the site root too, because some browsers, crawlers and feed readers request that path directly.
Which Favicon Format to Use
ICO
ICO is a container that holds several PNG images in one file, usually 16×16, 32×32 and sometimes 48×48. It is the most compatible format and the one browsers look for at /favicon.ico. Renaming a PNG to .ico does not create a valid ICO file; export it with a tool that builds the container.
PNG
PNG supports transparency and is the format for the Apple touch icon and manifest icons. Declare each file with its exact size, for example sizes="32x32". Shrinking a large logo rarely gives a crisp 16 or 32 px result, so check small sizes by eye and simplify the artwork where needed.
SVG
An SVG favicon scales to any size from one file and can even switch colors for dark mode with a media query. Chrome, Firefox and Edge support it; Safari support is newer, so keep favicon.ico as a fallback. Use a self-contained file with no external fonts or images.
