The short version
Put these files at the root of your site so they answer at /favicon.ico, /icon.svg and so on, then paste the snippet into your <head>.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Drop the manifest line if the site is not meant to be installed. Everything else earns its place on every site.
What each file is for
| file | why it exists |
|---|---|
favicon.ico | Crawlers, RSS readers and older browsers request /favicon.ico by literal path without reading your HTML. Carries 16, 32 and 48px layers. |
icon.svg | One vector file for current browsers, sharp at any size and pixel density. Can carry its own dark-mode variant. |
favicon-96x96.png | A 96px PNG for Google Search results, which recommends an icon larger than 48px. |
apple-touch-icon.png | 180×180 for iOS home screens. Opaque, because iOS paints transparent pixels black, and square, because iOS applies its own mask. |
icon-192.png · icon-512.png | PWA home screen, install and splash icons, referenced from the manifest. |
icon-mask.png | A maskable icon with the mark kept inside the safe zone for Android launchers. |
manifest.webmanifest | Wires the PWA icons together with your app name and theme color. |
What you can stop shipping
- A dozen apple-touch-icon sizes. iOS scales one 180px icon to every size it needs. The per-device sizes and
-precomposedvariants date from much older iOS releases. browserconfig.xmlandmsapplication-*meta tags. They configured Windows 8 and 10 Start tiles, which current Windows no longer uses.- Separate 16px and 32px PNG link tags. The ICO carries those sizes, and browsers that understand SVG use
icon.svg. rel="shortcut icon".shortcutwas never a standard link type. Plainrel="icon"is enough.
Keep them at the site root
Serve the files as plain static files from /. Bundlers that fingerprint assets (favicon.3f2a1b.ico) break the one path that tools request without asking, /favicon.ico. In Vite, Astro and Rails that means the public/ directory. Next.js App Router has its own file conventions, covered in favicons for Next.js.
Why your SVG favicon disappears in dark mode
A black logo on a transparent background looks fine in a light tab strip and vanishes in a dark one. The browser draws the icon straight onto its own chrome color. There are two fixes: give the icon an opaque background, or ship an icon.svg with a prefers-color-scheme media query that swaps colors when the browser is dark. Dark mode favicons covers the second approach in detail.
Maskable icons, briefly
Android launchers crop PWA icons into circles, squircles and rounded squares. An icon marked "purpose": "maskable" in the manifest is expected to keep its important content inside a central safe zone, a circle 80% of the icon width, with the rest filled by background. Use the regular icon-192.png and icon-512.png for everything else. The PWA icon generator pads the maskable icon for you.
Favicons are cached hard
Browsers keep favicons far longer than the page that declared them, sometimes surviving a normal reload. When you replace an icon, change its URL:
<link rel="icon" href="/favicon.ico?v=2" sizes="32x32">
<link rel="icon" href="/icon.svg?v=2" type="image/svg+xml">Common mistakes
- A transparent
apple-touch-icon.png, which renders on a black square on iOS. - An ICO that is really a renamed PNG. Most browsers cope, but some tools that read
/favicon.icodirectly do not. - Declaring an icon that 404s. Check every declared URL with the favicon checker.
- Blocking icon paths in
robots.txt, which stops Google from showing your favicon in search results. - A detailed logo shrunk to 16px. Use a simpler mark, or a single letter, for the smallest sizes.
Questions
How many favicon files does a website need?
Five covers browsers, Google Search and iOS: favicon.ico, icon.svg, favicon-96x96.png, apple-touch-icon.png, plus a manifest with 192px, 512px and maskable icons if the site should be installable.
Do I still need favicon.ico if I have an SVG favicon?
Yes. Crawlers, feed readers and older browsers request /favicon.ico directly. See ICO vs SVG.
Why does my new favicon not show up?
Favicons are cached aggressively. Add a version query such as ?v=2 to the icon URLs, or test in a private window.
Does the favicon have to be at the root of the site?
The files referenced by link tags can live anywhere, but /favicon.ico must answer at the root, because tools request it without reading your HTML.