Favicons: the handful of files you actually need
A favicon is the little icon in a browser tab. It also turns up in bookmarks, history, phone home screens, installed web apps and next to your site in search results. Because each of those places grew its own requirements over the years, favicon advice tends to sprawl. Some generators produce twenty files and a dozen lines of HTML. You do not need most of them.
Where it started
Internet Explorer 5, in 1999, introduced the idea. When someone bookmarked a page, the browser quietly requested /favicon.ico from the site's root and showed it in the Favourites menu. That habit stuck. Browsers still ask for /favicon.ico by default when a page does not say otherwise, which is why so many server logs are full of 404 errors for it.
The ICO format suited the job because one file can hold several sizes. That remains useful: the browser picks the right size for the context instead of scaling one image up or down.
The files that matter
| File | Size | What uses it |
|---|---|---|
| favicon.ico | 16, 32, 48 inside | The default request, older browsers, Windows shortcuts |
| favicon-32x32.png | 32 | Tabs on high-density screens |
| favicon-16x16.png | 16 | Tabs on standard screens |
| apple-touch-icon.png | 180 | iPhone and iPad home screens |
| android-chrome-192x192.png | 192 | Android home screens |
| android-chrome-512x512.png | 512 | Splash screens and installed web apps |
| site.webmanifest | – | Points Android and Chrome at the two large icons |
That is the complete set for every mainstream browser and device. A favicon generator can make all of them from one square image in a few seconds, along with the HTML.
Quirks that catch people out
Apple fills transparency with black
When someone adds your site to an iPhone home screen, iOS uses the Apple touch icon and rounds its corners. If the icon has a transparent background, iOS fills it with black. A dark logo on a transparent background then vanishes into a black square. Give the Apple touch icon a solid background colour, even if all your other icons are transparent.
Android crops icons into shapes
Android launchers display icons as circles, rounded squares or other shapes depending on the phone. Icons marked as “maskable” in the manifest can be cropped quite tightly: only a circle covering the central 80 percent of the icon is guaranteed to be visible. If your design fills the whole square, add padding so nothing important sits near the corners.
Google has its own rules
For the icon next to your site in Google search results, Google asks for a square favicon that is a multiple of 48 pixels (48 × 48, 96 × 96, 144 × 144 and so on), linked from your home page and crawlable. A favicon.ico containing a 48-pixel image, or a 192-pixel PNG, satisfies that. It can take a while for Google to pick up a change.
Browsers cache favicons stubbornly
Change your favicon and you may keep seeing the old one for days. Browsers store favicons in a separate cache that ignores most normal refreshes. Testing in a private window helps, and adding a version to the link, like /favicon.ico?v=2, forces browsers to fetch the new file.
SVG favicons
Most modern browsers accept an SVG favicon, which stays sharp at every size and has a neat trick: an SVG can contain a CSS media query for prefers-color-scheme, so the icon can switch colours when the browser is in dark mode. A black logo that disappears on a dark tab bar can turn white automatically.
Support is not universal, though, and Safari has historically relied on other formats. Treat SVG as a bonus layered on top of the PNG and ICO files, not a replacement.
Designing for 16 pixels
The hardest part of a favicon is not the files; it is the design. At 16 × 16, there are 256 pixels in total. A detailed logo becomes a smudge. The favicons people recognise instantly are bold and simple: a single letter, a solid shape, one or two strong colours.
A practical approach is to take the symbol from your logo, not the wordmark, fill the square with it leaving a little breathing room, and look at it at actual size in a browser tab next to other sites. If you cannot tell what it is at a glance, simplify it further.
The HTML
With the files in your site's root folder, this is all the markup you need in the <head> of each page:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Five lines, six image files and a small manifest. Everything else is optional.