HTML basics Recommended

Ship a full set of icons

Ship an SVG favicon, a /favicon.ico fallback, a 180 px opaque apple-touch-icon, and 192, 512 and maskable icons for installed web apps.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Start from one square image. Export favicon.svg, a favicon.ico with 16, 32 and 48 px sizes, and a 180 px opaque apple-touch-icon.png. Add 192 and 512 px PNGs, plus a maskable 512 px PNG with a safe zone.

Example

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.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" }
  ]
}

How to check

Each file answers 200 with the right type. The maskable icon looks right in a maskable-icon preview.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/html-basics/favicons.