Why favicon.ico still matters
Browsers read the <link> tags in your HTML. A lot of other software does not: feed readers, link previewers, bookmarking tools and crawlers often request /favicon.ico by literal path. If nothing answers there, they show a blank or generic icon. The ICO is the one favicon file that has to exist at the root regardless of what else you ship.
What is inside the file
An ICO is a container holding several images. favicon.zip writes 16, 32 and 48px layers by default:
| layer | used for |
|---|---|
| 16px | Browser tabs and bookmarks at standard density. |
| 32px | Tabs on high-density screens, and desktop surfaces that want a larger icon. |
| 48px | Larger desktop surfaces, such as shortcuts. Optional. |
- Entries are stored as 32-bit BMP with an alpha channel and a 1-bit mask, the most widely readable form.
- Entries are written largest first, which avoids a Chrome quirk with some ascending-order ICOs.
- Fully transparent pixels are whitened so older renderers that ignore alpha do not show dark fringes.
- Each layer is rendered from the source at its own size. Downscaling one 256px bitmap is what makes many ICOs blurry.
Linking it
<link rel="icon" href="/favicon.ico" sizes="32x32">The file must live at the site root. sizes="32x32" matters when you also ship an SVG favicon, because without it Chrome can pick the ICO over the SVG. More in ICO vs SVG.
Questions
Can I just rename a PNG to favicon.ico?
Many browsers will display it, since they sniff the content. Other software that expects a real ICO container may not, and you lose the separate 16px layer. A proper ICO costs nothing extra.
Which sizes should favicon.ico contain?
16 and 32px cover browser tabs. Add 48px for Windows shortcuts. Larger sizes belong in PNG files referenced from the manifest and apple-touch-icon.
Where do I put favicon.ico?
At the root of the site, so it answers at /favicon.ico. Not in an assets folder with a hashed filename.