Favicon Sizes: The Complete Chart and the HTML You Need

Favicon sizes today come down to five files: a 32×32 favicon.ico, an SVG icon, a 180×180 Apple touch icon, and two PNGs in the web app manifest at 192×192 and 512×512, one of them maskable. Anything else, such as 57×57 Apple icons, Windows tiles or extra PNG sizes, is legacy and can go.

The size chart

File	Size	Used by	Notes
`favicon.ico`	32×32 (may also hold 16 and 48)	Every browser, RSS readers, anything that asks for `/favicon.ico`	Keep it at the site root, even if your HTML declares other icons.
`favicon.svg`	Any, square viewBox	Tabs in Chrome, Edge and Firefox	Sharp at every size and can switch colors in dark mode.
`favicon-96x96.png`	96×96	Google Search	Optional if the Apple touch icon is declared; Google reads both.
`apple-touch-icon.png`	180×180	iPhone and iPad home screens, Google Search	Opaque background. iOS rounds the corners itself.
Manifest icon	192×192	Android home screen	Listed in `icons` in the web app manifest.
Manifest icon	512×512	Install prompt, splash screen	Chrome's install criteria ask for a 192 and a 512 icon.
Maskable icon	512×512	Android adaptive icons	`"purpose": "maskable"`, logo inside the central 80% circle.

Browser tabs: favicon.ico and SVG

A tab shows the icon at 16 CSS pixels, which is 32 device pixels on a high-density screen. That is why the 32×32 image inside favicon.ico matters most. Add 16 and 48 to the same file if you like; browsers pick the closest one.

An SVG icon covers every size at once. It can also carry a prefers-color-scheme media query, so a dark logo turns light on dark tabs. Declare the ICO first with sizes="32x32" and the SVG after it: browsers that support SVG take it, the rest fall back to the ICO.

Google Search

Google's favicon guidelines ask for a square icon of at least 8×8 pixels and recommend one larger than 48×48. The supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on that list, so an SVG-only site gives Google nothing to use. Google reads both rel="icon" and rel="apple-touch-icon", so a declared 180×180 Apple touch icon already meets the size advice. If you want a dedicated file, a 96×96 PNG works.

iPhone and iPad

iOS uses the Apple touch icon when someone adds your site to the home screen. 180×180 is the size for current iPhones (60 points at 3× scale); iPads scale it down without trouble, so one file is enough. Transparent areas turn black on the home screen, so give the icon a solid background. Without the icon, iOS falls back to a page screenshot or a letter on a plain tile.

Android and installable web apps

Android and Chrome read icons from the web app manifest. The 192×192 icon goes on the home screen; the 512×512 one appears in the install dialog and on the splash screen.

A maskable icon is a separate 512×512 image whose artwork fills the whole square. Android crops it into the shape the phone uses: a circle, a squircle or a rounded square. Keep the logo inside a centered circle with a diameter of 80% of the image and it survives every mask. Without a maskable icon, Android shrinks your regular icon and puts it on a white circle.

The HTML

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

And the icons part of site.webmanifest:

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

Serve the manifest as application/manifest+json and every icon with its real image type. A server that answers /favicon.ico with an HTML page and status 200 breaks the icon, even though the network tab looks fine. Single-page apps often do this.

Sizes you can drop

Apple touch icons at 57, 60, 72, 76, 114, 120, 144 and 152 px. iOS scales the 180 px one.
mstile-*.png, browserconfig.xml and msapplication-* tags. They served Windows 8 and 10 Start tiles.
Safari's mask-icon. Safari 12 and later use the regular favicon for pinned tabs.
Separate 16×16 and 32×32 PNG links when favicon.ico already holds both.

Check your set

Favicon Checker fetches every file above from your site, measures the real size and format, and shows how the icons look in tabs, Google, iOS and Android.