Every icon file
your platform
actually needs.

Web favicon

The modern set is smaller than most guides claim. An SVG covers every current browser at every size; the .ico exists only for legacy fallback, and it is one file, not three.

The <head> block

IconFlow writes this next to the assets as favicon-head.html, so the markup and the files are produced together and cannot disagree:

<!-- Paste into <head>. SVG is primary; .ico is the legacy fallback. -->
<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">
<meta name="theme-color" content="#0b0d12">

PWA manifest and maskable icons

An adaptive platform crops your icon to a shape it chooses. A square drawing that reaches the canvas edge loses its corners; one with transparency shows the mask through. Both problems are solved before export, by insetting the artwork and flattening it onto the background colour.

The generated site.webmanifest declares exactly three icons — the third carrying "purpose": "maskable":

{
  "name": "My App",
  "short_name": "My App",
  "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": "#0b0d12",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "scope": "/"
}

Safe zone. The maskable asset insets the artwork 10% on every side, leaving it at 80% of the canvas, then flattens it. Any platform mask — circle, squircle, rounded square — lands inside that margin.

Windows pinned-site tiles optional

Only produced with --windows-tiles. The artwork is centred on each canvas rather than stretched, which is why the wide tile takes a smaller scale than the squares.

Tauri

Five PNGs plus the two desktop containers. The ICO frame order matches the Tauri CLI's own output, so the result drops into src-tauri/icons/ unchanged.

Electron

electron-builder reads one source image per platform. The optional corner radius is applied to the raster frames only — your SVG master keeps its own geometry.

macOS menu bar and system tray

This is the target that fails most often, and it fails silently: a template image carries no colour at all. macOS reads its alpha channel and paints the shape itself, so a full-card app icon with an opaque background arrives as a solid black rectangle.

Give the tray its own drawing. A menu bar mark needs real transparency around a sparse shape — usually a simplified version of the master, not the master itself. Pass it with --tray-svg. When you do not, IconFlow derives alpha from the mark's contrast, and if no semantic shape can be isolated it refuses the build rather than shipping a black square.

Chat emotes

An emote is judged smaller than its upload and on two backgrounds at once: Twitch draws it at 28 pixels, Discord and Slack at roughly 22 to 32, on white and on dark chat alike. Each size below is rendered natively from the SVG, not scaled down from the largest, and a file over its platform's upload limit fails the build instead of the upload form. all builds the app-icon targets; ask for emote by name.

Why 16 pixels decides everything

Every size in the tables above is rendered from the same SVG, but only one of them is where icons actually fail. At 16 pixels a counter closes, a hairline vanishes, and two adjacent colours average into one. A design reviewed at 1024 pixels and exported downward can be unreadable in the browser tab it was made for — and the export step will not tell you.

IconFlow inverts the order. It renders native pixels through a pinned Chromium at every target size, shows you the result at 1:1, and ship fails closed unless automated checks are clean and all six human rubric scores are at least 4 out of 5.

Questions people ask