What favicon sizes do I actually need?

A favicon.ico holding 16, 32 and 48 pixel images, PNG tab icons, a 180 pixel apple-touch-icon for iOS, the Android icons and a maskable variant. This page produces all of them from one drawing, plus the manifest and the link tags to paste into your head.

Why is the iOS icon given a background?

Safari composites a transparent home-screen icon onto black, so a logo drawn in dark ink simply disappears. apple-touch-icon.png is therefore always generated with a background here, whatever the other sizes use.

What does a maskable icon mean on Android?

Android crops an adaptive icon to whatever shape the launcher uses - a circle, a squircle, a rounded square - and can take about twenty per cent off every edge. The maskable file keeps the artwork well inside that safe area so it survives any launcher.

Do I still need favicon.ico?

Yes, it is still worth shipping. Bookmarks, older browsers and some feed readers request /favicon.ico by name and ignore the link tags entirely. The .ico produced here holds the 16, 32 and 48 pixel images as PNGs inside the container, which every browser since Vista reads.

Favicon and app icons

One drawing, every size a browser or a phone asks for - including the opaque iOS icon and the maskable Android one, which are the two that usually ship broken. The logo is drawn in this tab and never uploaded.

Files8 icons + manifest
InputPNG, JPG, WebP or SVG
Your logoNever leaves the tab

Your logo

A square drawing works best. SVG gives the sharpest result.

placeholder.svg · drop a file onto the box, or use the button above.

Background

The iOS and maskable icons are filled whatever you choose here - transparency comes out black on a home screen.

Padding: 8%Room around the drawing. The maskable icon always gets at least 20%.Corner rounding: 0%Ignored on the maskable icon.

App nameGoes in the manifest.Short nameShown under the icon on a home screen.

Theme colourThe browser UI tint on Android and in the manifest.

What you get

Previews are scaled to fit; each file is generated at its stated size. Click one to download it on its own.

favicon.ico
48×48
16, 32 and 48 in one file - for older browsers and bookmarks
favicon-16x16.png
16×16
The tab, at its smallest
favicon-32x32.png
32×32
The tab on a high-density screen
favicon-48x48.png
48×48
Windows taskbar and shortcuts
apple-touch-icon.png
180×180
iOS home screen - transparency comes out black, so this one is filled
icon-192.png
192×192
Android home screen
icon-512.png
512×512
Splash screen and app listings
icon-maskable-512.png
512×512
Android adaptive icon - artwork kept inside the safe circle

Paste this into your <head>

The snippet and the manifest are in the .zip as well.

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

site.webmanifest

{
  "name": "My site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Why the iOS icon is filled

Safari composites a transparent home-screen icon onto black, so a logo drawn in dark ink disappears. apple-touch-icon.png is always given a background here, whatever the others use.

What maskable means

Android crops an adaptive icon to whatever shape the launcher uses - a circle, a squircle, a rounded square - and can take twenty per cent off every edge. The maskable file therefore keeps the artwork well inside that safe area.

About favicon.ico

The .ico here holds 16, 32 and 48 pixel images as PNGs inside the container, which every browser since Vista reads. It is still worth shipping: bookmarks, older browsers and some feed readers ask for /favicon.ico by name and ignore the link tags.

Frequently asked questions

What favicon sizes do I actually need?: A favicon.ico holding 16, 32 and 48 pixel images, PNG tab icons, a 180 pixel apple-touch-icon for iOS, the Android icons and a maskable variant. This page produces all of them from one drawing, plus the manifest and the link tags to paste into your head.
Why is the iOS icon given a background?: Safari composites a transparent home-screen icon onto black, so a logo drawn in dark ink simply disappears. apple-touch-icon.png is therefore always generated with a background here, whatever the other sizes use.
What does a maskable icon mean on Android?: Android crops an adaptive icon to whatever shape the launcher uses - a circle, a squircle, a rounded square - and can take about twenty per cent off every edge. The maskable file keeps the artwork well inside that safe area so it survives any launcher.
Do I still need favicon.ico?: Yes, it is still worth shipping. Bookmarks, older browsers and some feed readers request /favicon.ico by name and ignore the link tags entirely. The .ico produced here holds the 16, 32 and 48 pixel images as PNGs inside the container, which every browser since Vista reads.