Which favicon files does a site need in 2026?

Six: favicon.ico with 16, 32 and 48 px images for legacy browsers and Windows; icon.svg for modern browsers; apple-touch-icon.png at 180 px for iOS; icon-192.png and icon-512.png for Android via the web manifest; and the manifest itself. A maskable 512 px icon is a worthwhile seventh, so Android can crop the icon to its shapes without cutting the artwork. The generator produces exactly that set.

What is a maskable icon?

Android crops home-screen icons to the launcher’s shape — circle, squircle, teardrop. A maskable icon is drawn with its artwork inside a central safe zone (a circle of 80% of the width) on a fully opaque background, so whatever the crop, nothing important is lost. The generator adds the 10% inset and fills the background for you.

Can a favicon.ico contain PNG images?

Yes. The ICO container has allowed PNG-compressed entries since Windows Vista and every browser reads them, so this tool stores PNGs at 16, 32 and 48 px inside favicon.ico, which is far smaller than the old uncompressed bitmaps.

Why does the 16 px preview look rough?

Because that is what the browser tab shows: a sixteen-pixel image, drawn pixel for pixel here rather than smoothed. Text of more than two characters and detailed artwork do not survive it. If the small sizes are illegible, use a single bold letter or a simpler mark for the icon.

Does anything get uploaded?

No. The icons are drawn on a canvas in your browser, the ICO and the zip are assembled in your browser, and the download is produced locally. The generator has no server.

Favicon Generator

runs in your browser

Turn a letter, emoji or image into every favicon a site needs — ICO, Apple touch, Android and maskable PNGs, an SVG, the web manifest and the HTML — as one zip.

Start from

TextFontBold

Text colour

Background

Corner radius %

Preview

rendering…

Rendering…

The 16 and 32 px icons are shown pixel for pixel — that is what a tab shows. The maskable icon is previewed through a circle, the harshest shape Android uses.

Site

NameShort name

Theme colour

The name and short name go in the web manifest, which Android uses for the home screen; the theme colour tints the browser chrome.

favicon.ico (16, 32, 48), apple-touch-icon.png, icon-192.png, icon-512.png, icon-512-maskable.png, icon.svg, manifest.webmanifest and a README.

HTML for <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">
<meta name="theme-color" content="#0f6b45">

Files at the site root. Browsers pick icon.svg when they can and favicon.ico otherwise; the manifest supplies the Android sizes.

manifest.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-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0f6b45",
  "background_color": "#0f6b45",
  "display": "standalone",
  "start_url": "/"
}

icon.svg

361 bytes

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><rect width="512" height="512" rx="102" fill="#0f6b45"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="ui-monospace, &quot;JetBrains Mono&quot;, Menlo, Consolas, monospace" font-size="266" font-weight="700" fill="#f4f3f0">99</text></svg>

about this tool

Start from a mark or an image

A favicon can be a letter, a short word, an emoji or an image. The text mode draws up to three characters — counted the way people count, so an emoji is one — on a coloured square with a corner radius, in a sans, serif, monospace or rounded face, and sizes the type by character count so one letter fills the square and three still fit. The image mode takes a PNG, JPEG, WebP or SVG, fits it into the square with optional padding and background, and, when the source is an SVG, keeps the markup to ship as the resolution-independent icon too.

What comes out

The current recipe, and nothing more: favicon.ico holding 16, 32 and 48 px PNGs (the ICO container has accepted PNG entries since Windows Vista, and the tool writes the container itself — a 6-byte header, a 16-byte directory entry per image and the PNGs as they are); icon.svg for browsers that take it; apple-touch-icon.png at 180 px, which iOS rounds itself; icon-192.png and icon-512.png for Android through the manifest; icon-512-maskable.png, drawn with the artwork inside the 80% safe zone on an opaque square so Android can crop it to any launcher shape; manifest.webmanifest with the site's name, short name, theme colour and the three icon entries; a README that says where to put everything; and the five lines for <head>. The lot downloads as one store-only zip, since PNGs are already compressed.

Seeing what users see

The 16 and 32 px previews are drawn pixel for pixel, because a browser tab does not smooth them, and that is where a three-letter icon or a detailed logo turns to mud — the preview is the test. The Apple icon is previewed with iOS's corner rounding and the maskable icon through a circle, the harshest shape a launcher uses.

Limits

Everything happens in the browser on a canvas: the fonts are whichever your system has under the chosen family, so the emoji set and the exact letter shapes follow your machine, and the resulting PNGs are pixel images of what you saw. The ICO stores PNG entries, which any browser or Windows 7+ reads; if you must support something older, that build needs uncompressed bitmaps this tool does not write. Photos rarely make good favicons and the tool does not try to simplify them. Nothing leaves the page and nothing is stored.

If the source needs cropping to a square first, image resize & crop will do it; if you are starting from an SVG, SVG optimizer cleans it up before conversion.

An icon usually wants a transparent background — the background remover will cut one out before you start.

questions

Which favicon files does a site need in 2026?: Six: favicon.ico with 16, 32 and 48 px images for legacy browsers and Windows; icon.svg for modern browsers; apple-touch-icon.png at 180 px for iOS; icon-192.png and icon-512.png for Android via the web manifest; and the manifest itself. A maskable 512 px icon is a worthwhile seventh, so Android can crop the icon to its shapes without cutting the artwork. The generator produces exactly that set.
What is a maskable icon?: Android crops home-screen icons to the launcher’s shape — circle, squircle, teardrop. A maskable icon is drawn with its artwork inside a central safe zone (a circle of 80% of the width) on a fully opaque background, so whatever the crop, nothing important is lost. The generator adds the 10% inset and fills the background for you.
Can a favicon.ico contain PNG images?: Yes. The ICO container has allowed PNG-compressed entries since Windows Vista and every browser reads them, so this tool stores PNGs at 16, 32 and 48 px inside favicon.ico, which is far smaller than the old uncompressed bitmaps.
Why does the 16 px preview look rough?: Because that is what the browser tab shows: a sixteen-pixel image, drawn pixel for pixel here rather than smoothed. Text of more than two characters and detailed artwork do not survive it. If the small sizes are illegible, use a single bold letter or a simpler mark for the icon.
Does anything get uploaded?: No. The icons are drawn on a canvas in your browser, the ICO and the zip are assembled in your browser, and the download is produced locally. The generator has no server.