Install favicons correctly in every framework.
Choose a stack to see where files go, where snippets go, what to copy, and how to verify the setup.
Plain HTML / Static Site
For static sites where you can place files at the public root and edit the HTML head manually.
1. Package output
After generating icons, this stack should download as favico-html-modern-package.zip.
The ZIP should contain one top-level folder: favico-html-modern-favicon/.
favico-html-modern-favicon/
├── favicon.ico
├── favicon.svg
├── favicon-dark.svg
├── favicon-96x96.png
├── favicon-dark-96x96.png
├── apple-touch-icon.png
├── site.webmanifest
├── web-app-manifest-192x192.png
└── web-app-manifest-512x512.png2. File copy location
Copy the generated favicon files to website root beside index.html.
| Generated file | Target location | Status | Purpose |
|---|---|---|---|
| favicon.ico | favicon.ico | Optional | Optional classic browser fallback file. Keep it when useful, but do not link it by default in modern light/dark favicon snippets. |
| favicon.svg | favicon.svg | Required | Light-mode SVG favicon for modern browsers. |
| favicon-dark.svg | favicon-dark.svg | Optional | Dark-mode SVG favicon used with prefers-color-scheme: dark. |
| favicon-96x96.png | favicon-96x96.png | Required | Light-mode PNG fallback favicon. |
| favicon-dark-96x96.png | favicon-dark-96x96.png | Optional | Dark-mode PNG fallback favicon. |
| apple-touch-icon.png | apple-touch-icon.png | Required | iPhone/iPad home screen icon. |
| site.webmanifest | site.webmanifest | Required | Web app manifest containing app metadata and PWA icon references. |
| web-app-manifest-192x192.png | web-app-manifest-192x192.png | Required | 192×192 Android/PWA icon referenced by the web app manifest. |
| web-app-manifest-512x512.png | web-app-manifest-512x512.png | Required | 512×512 Android/PWA icon referenced by the web app manifest. |
4. Head/favicon snippet location: index.html before </head>
<meta name="color-scheme" content="light dark">
<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=10" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg?v=10" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=10" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-dark-96x96.png?v=10" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=10">
<link rel="manifest" href="/site.webmanifest?v=10">5. Why this works
- The generated favicon assets are served from the website root, so the favicon links use root URLs such as /favicon.svg.
- The SVG and PNG links support modern browsers and light/dark color schemes.
- The web manifest connects Android/PWA icons with the website.
Support Favico Studio
Satisfied with the result?
If Favico Studio helped you create your favicon faster, you can support the creator and help keep this tool free, fast, and available for everyone.
6. Verify the setup
Use your local static server or deployment preview./favicon.svg
/favicon-dark.svg
/site.webmanifest
/web-app-manifest-192x192.png
/web-app-manifest-512x512.png7. Common mistakes
Using the source folder name in the browser URL
Wrong: /public/favicon.svg or /static/favicon.svg
Correct: /favicon.svg
Most frameworks copy public/static assets to the website root. The browser should usually request the root URL, not the source folder name.
Making favicon.ico the main favicon
Wrong: <link rel="icon" href="/favicon.ico">
Correct: Use SVG and PNG links with light/dark media queries.
favicon.ico is included as an old-browser fallback, but actively linking it can override the modern light/dark setup.