---
title: "Ship a full set of icons · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/html-basics/favicons
updated: 2026-10-20
licence: "All rights reserved"
---

# Ship a full set of icons

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [HTML basics](https://agentwranglers.se/playbook/website/html-basics)
- Rule: 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.
- How: 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.
- Check: `curl -sI` on each icon answers 200 with `image/svg+xml`, `image/x-icon` (or `image/vnd.microsoft.icon`) or `image/png`. The maskable icon keeps its logo inside the central 80% circle. The full manifest is in [let people install the site](https://agentwranglers.se/playbook/website/when-things-break/pwa-manifest).

Example:

```html
<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">
```

```json
{
  "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" }
  ]
}
```

**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`.

- Previous: [Write a summary for search results](https://agentwranglers.se/playbook/website/html-basics/meta-description)
- Next: [Colour the browser bar to match](https://agentwranglers.se/playbook/website/html-basics/theme-color)
- [HTML basics](https://agentwranglers.se/playbook/website/html-basics)