---
layout: post
title: How to do favicons on websites
seo: Ways - favicons on websites
tag: ways
permalink: /ways/favicons-on-websites
link: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
cited: Evil Martians
date: 2026-03-01

---

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

For the browser using HTML:

```html
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
```

If you’re making a PWA (Progressive Web App), also add this to the HTML:

```html
<link rel="manifest" href="/manifest.webmanifest">
```

And a file with the web app manifest:

```json
// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}
```

Maskable icons should have bigger paddings. The safe zone is a 409×409 circle. Use maskable.app to check your icon.

That’s it. If you want to know how I got here, the compromises I had to make, and how to build a set like this from scratch in a step-by-step fashion, stay tuned in for the rest of the article.