Favicon & PWA Icons: The Complete Setup Guide for 2026
Favicons look deceptively simple. The idea sounds trivial: make a 16x16 logo, drop a .ico file in your public/ directory, add one line to your <head>, done.
In reality, the device ecosystem is a mess. Between desktop browser tabs (Chrome, Firefox, Edge), iOS Safari home-screen shortcuts, Android PWA install prompts, legacy Windows tiles, and Google Search results, the “simple” favicon has grown into a matrix of resolutions, formats, and device-specific quirks. The recurring questions are always the same: what sizes are actually required today? Is .ico finally dead? Why does iOS Safari ignore the web manifest?
This guide lays out a clean, universally compatible favicon and PWA icon setup for 2026. It drops the deprecated requirements (no more XML payloads for Windows 8) and focuses on the minimal set of files that satisfy every modern platform.
Stop scaling PNGs in Figma and writing manifests by hand. Drop a single SVG into our local Favicon Generator and it produces the
.ico, Apple Touch Icons, maskable PWA PNGs, andsite.webmanifest.
1. The Minimal Checklist
The good news in 2026 is that vendor fragmentation has stabilized. You no longer need the 30+ file variations that older guides insisted on.
Here’s the minimal but complete set of files to deploy to your public/ (or static/) directory:
| Filename | Dimensions | Format | Purpose |
|---|---|---|---|
favicon.ico | 16x16, 32x32, 48x48 | ICO | Legacy browsers, enterprise intranets, and Google Search indexing. |
favicon.svg | Scalable vector | SVG | Modern desktop browsers. Supports dark-mode CSS media queries. |
apple-touch-icon.png | 180x180 | PNG | Required for iOS Safari “Add to Home Screen.” |
icon-192.png | 192x192 | PNG | Android home screen and baseline PWA manifest. |
icon-512.png | 512x512 | PNG | PWA splash screens and Play Store generation (TWA). |
site.webmanifest | N/A | JSON | Android/Chrome PWA install configuration. |
Notice what’s omitted? You no longer need browserconfig.xml, mstile-150x150.png, or Safari’s proprietary pinned-tab SVG (mask-icon). Microsoft and Apple have both moved to the W3C web manifest and standard SVGs.
2. The HTML
Add this block to the <head> of your app (or your Next.js _document.tsx / Astro Layout.astro). The tag order doesn’t matter to the parser, but keeping them grouped is good practice.
<!-- 1. Primary favicons: modern SVG with an ICO fallback -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- 2. Apple-specific: required for iOS Safari -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- 3. PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- 4. Browser toolbar / notch color -->
<meta name="theme-color" content="#121212" />That’s it — four tags. The 192px and 512px icons are handled by the browser parsing site.webmanifest in the background.
3. Each Format in Detail
A. favicon.svg (the modern standard)
SVG favicons are supported across all modern browsers (Chrome 80+, Firefox 41+, Edge 79+, Safari 15+). Because they’re vectors, they scale without pixelation, from a 1080p monitor to an 8K display.
The bonus: dark-mode media queries. SVGs support embedded CSS media queries, so the favicon can adapt to the OS dark-mode preference with no JavaScript.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
/* Light mode: dark grey logo */
path { fill: #121212; }
/* Dark mode: switch to white */
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<path d="M4 4h24v24H4z"/>
</svg>Without this, a dark-grey logo on a transparent background vanishes in a dark-themed browser tab. The media query fixes it.
B. favicon.ico (the legacy container)
The .ico format dates to 1995 and Internet Explorer 1.0, and you still can’t drop it in 2026:
- Scrapers: RSS readers, Slack unfurl bots, and crawlers hardcode a
GETto/favicon.ico. If it’s missing, they fill your logs with 404s. - Google Search: Google’s crawler uses
favicon.ico(looking for the 48x48 layer) to show your logo next to your URL in search results.
Note: a proper .ico isn’t a single image — it’s a binary container holding multiple resolutions. Yours should contain three layers: 16x16, 32x32, and 48x48.
C. apple-touch-icon.png (the iOS case)
When a user taps “Add to Home Screen” on an iPhone, iOS ignores the PWA manifest and looks in your HTML <head> for <link rel="apple-touch-icon" />.
If that tag is missing, iOS uses a blurry screenshot of your page as the icon — which looks unprofessional.
Rules for Apple Touch Icons:
- Dimensions: exactly
180x180. - No alpha channel: iOS doesn’t support transparent backgrounds. A transparent PNG gets filled with black, ruining the contrast. Use a solid background.
- No pre-rounded corners: upload a square. iOS applies its own “squircle” mask.
D. Preventing the iOS PWA white flash (splash screens)
When a PWA launches from the iOS home screen, there’s a 300–800ms delay while WebKit boots, and iOS flashes a white screen. To fix it, add Apple Touch Startup Images.
<!-- iOS requires exact screen-resolution matching for splash screens -->
<link rel="apple-touch-startup-image" href="/splash-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)" />
<!-- You need ~15 of these to cover all iPhone sizes -->Our Favicon Generator bundles all the required iOS splash-screen resolutions.
E. The PWA manifest
site.webmanifest (sometimes manifest.json) is a JSON config that tells Android, Chrome, and Windows how your app should behave when installed.
{
"name": "UseToolSuite Utilities",
"short_name": "Tools",
"description": "Developer utility suite.",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#121212",
"background_color": "#121212",
"display": "standalone",
"start_url": "/?source=pwa"
}Maskable icons
Android icon shapes vary by manufacturer — Samsung uses circles, Pixel uses teardrops, Motorola uses rounded squares. To support that without distortion, Google introduced maskable icons.
A maskable icon (purpose: "maskable") is a 512x512 PNG where the logo stays inside the inner 80% “safe zone,” with the outer 20% as solid background padding. On install, Android can crop that outer 20% to fit the user’s chosen shape. Without a maskable icon, Android shrinks your regular icon and puts it inside a white circle.
4. Favicons and Search CTR
Google redesigned its mobile and desktop search results to place the favicon prominently to the left of the URL and title.
That turned the favicon from a nice-to-have into a click-through-rate factor. When someone searches “JSON Formatter,” a recognizable favicon builds quick trust. A missing favicon shows Google’s generic grey globe, which reads as broken or low-quality and lowers your CTR — and a lower CTR signals to Google that your result is less relevant.
Further Reading
- SEO Meta Tags: Open Graph Architecture Checklist
- SVG Optimization: SVGO Multipass Compression
- Image Cropping and Rule of Thirds Aspect Ratio Guidelines
Skip the outdated Stack Overflow answers from 2018. Generate a mobile-, desktop-, and SEO-compliant icon set with our local Favicon Generator, and make your Open Graph link previews look right with our Meta Tag Generator.