How to Create a Modern Favicon in 2026
Build a lean, future-proof favicon and PWA icon set that stays pixel-sharp in browser tabs, bookmarks, and mobile home screens.
[!TIP] The 2026 Modern Favicon Stack (Only 4 Files Needed):
favicon.ico(32×32) — Legacy fallback for older tools, feed readers, and bookmarks.icon.svg— Scalable, vector icon with automatic dark mode CSS support for modern browsers.apple-touch-icon.png(180×180) — High-DPI icon with solid background for iOS home screens.site.webmanifest— Web App Manifest referencing192×192and512×512PNGs for Android & PWAs.
If you have ever used an online favicon generator, you have probably been overwhelmed: upload a logo, and you receive a .zip archive containing 35 distinct files, .xml configuration documents, and 40 lines of bloated HTML <head> tags.
In 2026, web standards are clean and unified. You do not need dozens of legacy assets. Here is the exact, lean standard used by top web applications.
1. The 4 Essential Icon Files
public/
├── favicon.ico (32×32 px — Legacy baseline)
├── icon.svg (Vector — Infinite scale + Dark Mode)
├── apple-touch-icon.png (180×180 px — iOS Home Screen)
├── icon-192.png (192×192 px — Android / PWA)
├── icon-512.png (512×512 px — Android / PWA Splash)
└── site.webmanifest (Manifest JSON configuration)Modern vs. Legacy Setup Comparison
| Asset | Modern Standard | Legacy generators (Bloated) | Why the Modern Approach Wins |
|---|---|---|---|
| Browser Tabs | icon.svg | 16×16, 32×32, 48×48 PNGs | SVG renders razor-sharp on 4K & 5K screens at < 1KB. |
| Legacy Fallback | favicon.ico (32×32) | 16×16 ICO | 32px downsamples cleanly without blurriness on Retina. |
| Apple iOS | apple-touch-icon.png (180×180) | 57px, 72px, 76px, 114px, 120px, 144px, 152px | iOS automatically downsamples the 180px master asset. |
| Android / PWA | icon-192.png & icon-512.png | 36px, 48px, 72px, 96px, 144px | Web App Manifest handles scaling dynamically. |
2. Dynamic Dark Mode in SVG Favicons
One of the greatest superpowers of SVG favicons is native dark mode detection. By placing a <style> block inside your icon.svg file, your icon will automatically switch color palettes when the user toggles dark mode on their operating system:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<style>
/* Default Light Mode Style */
.icon-shape {
fill: #09090b;
}
.icon-accent {
fill: #0ea5e9;
}
/* Automatic Dark Mode Adaptation */
@media (prefers-color-scheme: dark) {
.icon-shape {
fill: #f4f4f5;
}
.icon-accent {
fill: #38bdf8;
}
}
</style>
<rect class="icon-shape" x="2" y="2" width="28" height="28" rx="8" />
<circle class="icon-accent" cx="16" cy="16" r="6" />
</svg>3. Apple Touch Icon (180 × 180 px)
When an iPhone or iPad user taps “Add to Home Screen” in Safari, iOS looks specifically for apple-touch-icon.png.
- Dimensions: Exactly
180 × 180 pixels. - Background: Must be solid. iOS does not support transparent touch icons and will fill transparent regions with solid black.
- Corners: Keep corners square (90°); iOS applies the rounded squircle mask automatically.
4. Web App Manifest (site.webmanifest)
For Progressive Web Apps (PWAs) and Android Chrome bookmarking, place a site.webmanifest file in your public/ directory:
{
"name": "Your App Name",
"short_name": "App",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"theme_color": "#09090b",
"background_color": "#09090b",
"display": "standalone"
}5. The Complete HTML <head> Snippet
Copy and paste this clean, 5-line block into your site’s document <head>:
<!-- 1. The universal fallback for legacy systems -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- 2. Modern scalable SVG for Chrome, Firefox, Edge, Safari -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- 3. Apple iOS Home Screen icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 4. PWA Manifest for Android & desktop installation -->
<link rel="manifest" href="/site.webmanifest">
<!-- 5. Browser theme color matching your design system -->
<meta name="theme-color" content="#09090b">[!TIP] Cache Busting Tip: Browsers aggressively cache favicons. When deploying a new logo update, append a version query parameter to force an immediate refresh:
<link rel="icon" href="/favicon.ico?v=2">.
6. Generate Clean Favicons Instantly
Rather than wrestling with multi-layer image editors, use the Imagerry Favicon Studio.
Upload your brand artwork or SVG, adjust padding and background color, and export the exact 4-file bundle ready to drop straight into your project. All conversions happen client-side in your browser for maximum privacy and zero latency.
Try it in your browser
Imagerry runs 100% locally on your device using Canvas and WebAssembly. No server uploads. No accounts required.
Open Favicon GeneratorFrequently Asked Questions
Q.What is the best format for a favicon in 2026?
SVG is the recommended format for modern desktop and mobile browsers because it scales infinitely, supports dark mode via CSS, and weighs under 1KB. Pair it with a 32×32 favicon.ico fallback for legacy support.
Q.Why do legacy favicon generators give me 30+ files?
Old generators bundled historical assets for discontinued platforms like Windows 8 Live Tiles, obsolete Blackberry browsers, and legacy Android formats. Modern web standards only require 4 core files.
Q.Can SVG favicons automatically switch colors in Dark Mode?
Yes! By embedding an internal CSS @media (prefers-color-scheme: dark) block inside your SVG code, the icon will dynamically switch between light and dark themes based on the user's OS preference.
Q.Why does apple-touch-icon.png need a solid background?
iOS fills transparent background areas of web bookmark icons with solid black. Always give your 180×180 Apple Touch Icon a solid background color to keep your brand crisp.
Found an error or have feedback? Email us at support@imagerry.com