Favicon size guide
Every favicon size and file you need: favicon.ico, 16/32/48 PNGs, apple-touch-icon, manifest 192/512, maskable and Safari pinned tab, with ready-to-paste HTML and manifest snippets.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Filters
Filter by keyword or level; keywords match file names, sizes, formats and purposes.
Size reference
Compiled 2026-10; platform specs may change. Based on the W3C Web App Manifest, Apple apple-touch-icon conventions, the Microsoft browser configuration and browser support for sizes="any".
Showing 14 rows
| File name | Size | Format | Purpose | Level | HTML snippet |
|---|---|---|---|---|---|
| favicon.ico | 16/32/48 多尺寸 | ICO | Fallback for older browsers and bookmarks; pack 16, 32 and 48 into one .ico | Required | <link rel="icon" href="/favicon.ico" sizes="32x32"> |
| favicon-16x16.png | 16 × 16 | PNG | Browser tab icon | Required | <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> |
| favicon-32x32.png | 32 × 32 | PNG | High-density tab and bookmark icon | Required | <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> |
| favicon-48x48.png | 48 × 48 | PNG | Windows desktop shortcut icon | Recommended | <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> |
| favicon-96x96.png | 96 × 96 | PNG | Some Android browsers and desktop widgets | Optional | <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> |
| favicon.svg | any（矢量） | SVG | Scalable and preferred by modern browsers | Recommended | <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"> |
| apple-touch-icon.png | 180 × 180 | PNG | iOS home screen icon (must not be transparent) | Required | <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> |
| apple-touch-icon-152x152.png | 152 × 152 | PNG | iPad home screen icon | Optional | <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> |
| apple-touch-icon-167x167.png | 167 × 167 | PNG | iPad Pro home screen icon | Optional | <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"> |
| android-chrome-192x192.png | 192 × 192 | PNG | Android home screen and manifest icon | Required | <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> |
| android-chrome-512x512.png | 512 × 512 | PNG | Splash screen and store listing | Required | <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> |
| maskable-512x512.png | 512 × 512 | PNG | Maskable icon: keep artwork inside the central 80% safe zone | Recommended | <link rel="icon" type="image/png" sizes="512x512" href="/maskable-512x512.png"> |
| safari-pinned-tab.svg | any（单色矢量） | SVG | Monochrome icon for Safari pinned tabs | Optional | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> |
| mstile-150x150.png | 150 × 150 | PNG | Windows tile icon (with browserconfig.xml) | Optional | <meta name="msapplication-TileImage" content="/mstile-150x150.png"> |
Companion files
- site.webmanifest · PWA icon and theme declarations
- browserconfig.xml · Windows tile configuration
Required files
With these six files in place every mainstream browser and the iOS home screen works.
favicon.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png android-chrome-192x192.png android-chrome-512x512.png
Full HTML block
<!-- favicon：整理时点 2026-10 --> <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> <link rel="icon" type="image/png" sizes="512x512" href="/maskable-512x512.png"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> <meta name="msapplication-TileImage" content="/mstile-150x150.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#0f172a">
Paste it into <head> in order; adjust the paths to your site root.
Example site.webmanifest
{
"name": "Your site",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0f172a",
"background_color": "#ffffff",
"display": "standalone"
}Plain-text list
favicon.ico · 16/32/48 多尺寸 · ICO · required · Fallback for older browsers and bookmarks; pack 16, 32 and 48 into one .ico favicon-16x16.png · 16 × 16 · PNG · required · Browser tab icon favicon-32x32.png · 32 × 32 · PNG · required · High-density tab and bookmark icon favicon-48x48.png · 48 × 48 · PNG · recommended · Windows desktop shortcut icon favicon-96x96.png · 96 × 96 · PNG · optional · Some Android browsers and desktop widgets favicon.svg · any（矢量） · SVG · recommended · Scalable and preferred by modern browsers apple-touch-icon.png · 180 × 180 · PNG · required · iOS home screen icon (must not be transparent) apple-touch-icon-152x152.png · 152 × 152 · PNG · optional · iPad home screen icon apple-touch-icon-167x167.png · 167 × 167 · PNG · optional · iPad Pro home screen icon android-chrome-192x192.png · 192 × 192 · PNG · required · Android home screen and manifest icon android-chrome-512x512.png · 512 × 512 · PNG · required · Splash screen and store listing maskable-512x512.png · 512 × 512 · PNG · recommended · Maskable icon: keep artwork inside the central 80% safe zone safari-pinned-tab.svg · any（单色矢量） · SVG · optional · Monochrome icon for Safari pinned tabs mstile-150x150.png · 150 × 150 · PNG · optional · Windows tile icon (with browserconfig.xml)
CSV table
id,fileName,width,height,sizeLabel,format,requirement,purpose ico,favicon.ico,32,32,16/32/48 多尺寸,ICO,required,"Fallback for older browsers and bookmarks; pack 16, 32 and 48 into one .ico" png-16,favicon-16x16.png,16,16,16 × 16,PNG,required,"Browser tab icon" png-32,favicon-32x32.png,32,32,32 × 32,PNG,required,"High-density tab and bookmark icon" png-48,favicon-48x48.png,48,48,48 × 48,PNG,recommended,"Windows desktop shortcut icon" png-96,favicon-96x96.png,96,96,96 × 96,PNG,optional,"Some Android browsers and desktop widgets" svg,favicon.svg,0,0,any（矢量）,SVG,recommended,"Scalable and preferred by modern browsers" apple-touch-180,apple-touch-icon.png,180,180,180 × 180,PNG,required,"iOS home screen icon (must not be transparent)" apple-touch-152,apple-touch-icon-152x152.png,152,152,152 × 152,PNG,optional,"iPad home screen icon" apple-touch-167,apple-touch-icon-167x167.png,167,167,167 × 167,PNG,optional,"iPad Pro home screen icon" android-192,android-chrome-192x192.png,192,192,192 × 192,PNG,required,"Android home screen and manifest icon" android-512,android-chrome-512x512.png,512,512,512 × 512,PNG,required,"Splash screen and store listing" maskable-512,maskable-512x512.png,512,512,512 × 512,PNG,recommended,"Maskable icon: keep artwork inside the central 80% safe zone" safari-pinned-tab,safari-pinned-tab.svg,0,0,any（单色矢量）,SVG,optional,"Monochrome icon for Safari pinned tabs" mstile-150,mstile-150x150.png,150,150,150 × 150,PNG,optional,"Windows tile icon (with browserconfig.xml)"
What this tool does
- Filling in icons before launch: with the six required files (favicon.ico, 16/32 PNGs, apple-touch-icon, 192/512 PNGs) browsers and the iOS home screen all render correctly.
- Shipping a PWA: confirm the manifest carries 192 and 512 plus a maskable icon so Android adaptive masking never shows a cropped edge.
- Paste the full HTML block into <head> instead of recalling which rel and sizes values you need, and never forget sizes="any" for the SVG.
- Debugging a stale icon: compare file names against the table to spot which size is missing and forcing the browser back to its default.
Example
Input
Level filter set to "Required"
Output
Six files: favicon.ico (16/32/48 multi-size), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 × 180), android-chrome-192x192.png and android-chrome-512x512.png, each with its matching HTML line.
Beyond the required set there are recommended and optional rows: favicon.svg (vector), maskable-512x512.png for adaptive masking, 48/96 PNGs and the Safari pinned-tab monochrome icon.
Frequently asked questions
Do I still need favicon.ico?
Yes. Modern browsers prefer PNG and SVG, but older browsers, bookmark bars and some crawlers still request /favicon.ico. Pack 16, 32 and 48 into one .ico as the fallback.
Why must apple-touch-icon be opaque?
iOS places the icon on a white background before masking the corners, so transparent pixels turn into white patches and the shape looks broken. Keep this file fully opaque.
How is a maskable icon different?
Android may mask maskable icons into a circle, a square or a squircle, so the artwork must sit inside the central 80% safe zone with only background colour at the edges. A normal icon can lose its subject to that mask.
Does an SVG icon need sizes?
Yes — sizes="any" tells the browser the vector scales to anything. With rel="icon" type="image/svg+xml" and sizes="any", modern browsers pick it first and stay crisp at every zoom level.
I changed the icon but the browser shows the old one.
Icon caching is stubborn. Hard-reload first (Ctrl/Cmd + Shift + R), or temporarily serve a versioned file name such as favicon-32x32-v2.png, confirm it appears, then switch back.
Keywords：favicon sizesapple touch iconfavicon ico pngweb manifest iconsmaskable iconFavicon 尺寸网站图标规格apple-touch-iconmanifest 图标图标清单