A logo that looks sharp at 400px usually turns to mud at 16px. Starting from the right crop and the right sizes is what keeps a tab icon recognisable.
A favicon is the smallest image on your site and the one people see most often. It lives in a tab, in a bookmark list, and in a history entry, always at a size where a single stray pixel changes the shape.
Start from a crop, not from the whole picture
Most logos are wider than they are tall. A browser wants a square, so the useful work is choosing which part of the mark survives being made square: the symbol, the initial, or the letterform on its own. Give it a little padding, because the browser rounds the corners on some platforms and clips the edges on others.
The sizes to export
Browsers ask for the icon that fits the surface they are drawing on. Exporting one file and hoping it scales is how icons end up blurry in the places they are seen most.
| Size | Where it shows up |
|---|---|
| 16 x 16 | Browser tab, bookmark list |
| 32 x 32 | Tab on a high-density screen |
| 48 x 48 | Windows shortcut and legacy surfaces |
| 180 x 180 | Home screen icon on iOS |
Sizes a typical site ships
Link them in the head
The files only work once the page tells the browser where they are. Each size gets its own link tag with the size declared, so the browser picks the right one instead of guessing from the file name.
Head tags for the generated set
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Check it at the size people see
- Open the page and look at the tab, not the preview.
- Bookmark the page and check the icon in the bookmark list.
- Refresh a few seconds later so the old icon is not cached in the tab.
- Squint: if the mark does not read at that size, simplify the crop rather than adding detail.