Favicon guides for modern websites.
Learn what favicon files do, how browsers and search engines read them, and how to install a complete light/dark favicon package across modern stacks.
What is a favicon?
Understand the small icon used by browser tabs, bookmarks, history, search previews, and app shortcuts.
Why your site needs one
Learn why a clean favicon improves trust, brand recognition, and browser/search presentation.
Modern favicon files
See the full modern package: SVG, PNG, Apple Touch Icon, PWA manifest icons, and dark-mode variants.
Browser and search preview
Know which files browsers and search engines commonly read and how to verify them.
iOS and Apple Touch Icon
Use apple-touch-icon.png for iPhone and iPad home screen shortcuts.
Android and PWA manifest
Use site.webmanifest and manifest icons for Android install prompts and PWA-ready websites.
Stack-specific installation
Different frameworks place favicon files differently. Learn the root, public, static, app, and dashboard patterns.
Troubleshooting
Fix old icons, browser cache, wrong paths, missing manifest icons, and favicon.ico conflicts.
Basics
What is a favicon?
A favicon is the small website icon shown in browser tabs, bookmarks, history lists, pinned tabs, search previews, and app shortcuts. It is one of the smallest visual elements on a website, but it has a big impact on recognition and trust.
A modern website should not depend on one file only. A complete setup uses scalable SVG, PNG fallback, Apple Touch Icon, a web manifest, and optional dark-mode favicon files.
Why your site needs a favicon
Brand recognition
Users identify your website faster in crowded browser tabs.
Professional trust
A missing or broken favicon makes a finished site feel incomplete.
Search appearance
Search engines and previews can use your site icon when the files are reachable.
App shortcuts
Mobile home screen and PWA installs need high-quality icon assets.
Latest package
Understanding modern favicon files
The latest Favico Studio package includes the classic files plus the new dark-mode assets. The dark files are optional, but they are needed when you want the browser tab icon to adapt to the user's light or dark color scheme.
favicon.icoOptional classic fallback. Keep the file when useful, but do not link it by default in modern light/dark snippets.
favicon.svgPrimary scalable light-mode favicon for modern browsers.
favicon-dark.svgDark-mode SVG favicon used with prefers-color-scheme: dark.
favicon-96x96.pngPNG light-mode fallback for browsers, search previews, and platforms that prefer raster icons.
favicon-dark-96x96.pngPNG dark-mode fallback for dark color scheme support.
apple-touch-icon.pngiPhone and iPad home screen shortcut icon.
site.webmanifestWeb app manifest with app name, theme color, background color, and PWA icons.
web-app-manifest-192x192.pngAndroid/PWA manifest icon for install prompts and app shortcuts.
web-app-manifest-512x512.pngLarge Android/PWA icon used for install screens, launchers, and splash/icon generation.
Modern snippet
Light and dark favicon setup
The clean modern snippet uses media queries for light and dark mode. Keep favicon.ico as an optional fallback file, but do not link it by default because it can override or cache against the light/dark favicon behavior.
<meta name="color-scheme" content="light dark">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-dark-96x96.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Browser tab and search result favicon
Browsers usually read the rel="icon" links first. Search and preview systems may also look for common root paths like /favicon.svg, /favicon-96x96.png, and /site.webmanifest.
The most important rule is simple: if your snippet says href="/favicon.svg", then https://yourdomain.com/favicon.svg must load directly in the browser.
iOS and Apple Touch Icon
iPhone and iPad home screen shortcuts use apple-touch-icon.png. Keep it square and high quality, commonly 180×180 pixels.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Android and PWA manifest
Android and PWA install flows read the web app manifest. Root deployments normally use absolute icon paths. Subfolder deployments should use relative paths so the manifest does not point to the wrong location.
Root deployment manifest
{
"name": "My Website",
"short_name": "MySite",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"theme_color": "#2563eb",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/"
}Subfolder deployment manifest
{
"name": "My Website",
"short_name": "MySite",
"icons": [
{
"src": "web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"theme_color": "#2563eb",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "."
}Root vs subfolder deployment
Root deployments use paths that begin with /. Subfolder deployments, such as /docs/, should use relative paths or the framework's base-path helper.
Root snippet
<meta name="color-scheme" content="light dark">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-dark-96x96.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Subfolder-safe snippet
<meta name="color-scheme" content="light dark">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-dark-96x96.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="favicon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">Stack-specific installation guides
Each framework serves static files differently. That is why Favico Studio keeps stack-specific package mappings instead of one generic folder for every project.
Static public folder
Used by HTML, Vite, Astro, Qwik, Solid, Express, Laravel, and many simple deployments. Files go in public/ or the site root.
Template or layout head
Used by Rails, Laravel, Django, Phoenix, Jekyll, Hugo, and many SSGs. Paste the favicon snippet into the shared head template.
Config-based head
Used by Nuxt, Docusaurus, VuePress, and similar frameworks. Add favicon links in the framework config.
Framework metadata files
Used by Next.js App Router. Generated files are renamed to Next.js special metadata names inside app/.
Dashboard upload
Used by WordPress Site Icon and GitBook Cloud. You upload a 512×512 site icon instead of editing code.
Static export injection
Used by GitBook Legacy / HonKit. A post-build script copies files and injects head tags into exported HTML.
Special case
Next.js App Router favicon placement
Next.js App Router uses special metadata filenames inside app/. The generated favicon content is the same, but the package renames files to match Next.js conventions.
| Generated file | Next.js location | Purpose |
|---|---|---|
| favicon.ico | app/favicon.ico | Optional classic fallback |
| favicon.svg | app/icon.svg | Generated favicon renamed to Next.js icon metadata file |
| favicon-96x96.png | app/icon1.png | Generated PNG renamed to a Next.js icon metadata file |
| apple-touch-icon.png | app/apple-icon.png | Generated Apple icon renamed to Next.js Apple metadata file |
| site.webmanifest | app/manifest.json | Generated manifest renamed to Next.js manifest metadata file |
| favicon-dark.svg | public/favicon-dark.svg | Dark-mode file referenced manually from metadata |
| favicon-dark-96x96.png | public/favicon-dark-96x96.png | Dark-mode PNG referenced manually from metadata |
| web-app-manifest-192x192.png | public/web-app-manifest-192x192.png | Manifest icon referenced by public URL |
| web-app-manifest-512x512.png | public/web-app-manifest-512x512.png | Manifest icon referenced by public URL |
Do not paste normal HTML favicon <link> tags into App Router pages. Next.js automatically detects many files inside app/. Use the metadata snippet only when you need the dark-mode public files.
// app/layout.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
icons: {
icon: [
{
url: "/favicon-dark.svg",
type: "image/svg+xml",
media: "(prefers-color-scheme: dark)",
},
{
url: "/favicon-dark-96x96.png",
type: "image/png",
sizes: "96x96",
media: "(prefers-color-scheme: dark)",
},
],
},
};The favicon.ico rule
The classic favicon.ico file is still useful as a fallback, but it should not be the active modern favicon link in the default light/dark setup.
Recommended
Keep favicon.ico in the package as optional fallback only.
Avoid by default
<link rel="icon" type="image/x-icon" href="/favicon.ico">Favicon troubleshooting
Old icon still appears
Browsers cache favicons aggressively. Try incognito, hard refresh, clear site data, and clear CDN/cache plugin.
Dark icon does not switch
Check that color-scheme meta exists and dark links use media="(prefers-color-scheme: dark)".
Manifest icons fail
Open the exact src paths from site.webmanifest in the browser. The URLs must load directly.
Wrong subfolder paths
For /docs/ deployments, use relative paths or the framework base path helper instead of root-only paths.
Next.js ignores files
Use Next.js metadata names like app/icon.svg and app/apple-icon.png instead of random app/favicon.svg names.
ICO downloads when opened
That can be normal. The ICO is a fallback file, not the modern light/dark switching mechanism.
Want the correct stack package?
Generate a favicon once, then download the stack-specific package with the correct file placement and implementation snippet.