For 80/20 favicon needs in 2025, you just need:
```html
<head>
<!-- Other head tags -->
<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">
<!-- Other head tags -->
</head>
```
`apple-touch-icon.png` should be 180 x 180px. It looks better if you add 20 pixels of padding and a background color.
This if it's a progressive web app:
```html
<link rel="manifest" href="/manifest.webmanifest">
```
And a `manifest.webmanifest` JSON file for Android devices:
```json
{
"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" }
]
}
```
## Process
1. [ ] Get / create SVG icon
1. [ ]