Favicons and PWA Icons in 2026: Sizes, Manifest, and theme-color

A missing favicon makes a polished site feel unfinished. A blurry home-screen icon makes a PWA feel untrusted. Browsers and operating systems ask for different sizes, formats, and HTML tags — and the checklist changed as IE-era favicon.ico-only setups gave way to PNG, SVG, and Web App Manifest entries. This guide is the 2026 practical set: what to ship, what to link, and how theme-color ties the browser chrome to your brand.

Bottom line: Provide an SVG (or high-res PNG) favicon, a 180×180 apple-touch-icon, and manifest icons at least 192 and 512. Set theme-color to match your shell. Generate assets with a Favicon Generator and verify head tags with a Meta Tags Generator.

What browsers look for today

Asset	Role
SVG favicon	Crisp at any DPR; modern Chromium, Firefox, Safari
PNG favicons (32, 16)	Fallbacks and older contexts
favicon.ico	Legacy bookmark / some crawlers; optional but still useful
apple-touch-icon	iOS home screen / Safari share
Manifest icons	PWA install, Android home screen, splash
theme-color	Browser UI tint (mobile Chrome, etc.)

You do not need twenty PNG sizes for a content site. You do need the right few, correctly linked.

Recommended HTML head

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#0f766e" />

Generate the PNG/ICO set from a master logo using a Favicon Generator. Keep a single source SVG in the repo and treat rasters as build outputs.

apple-touch-icon specifics

• Prefer 180×180 PNG (iOS convention).
• Avoid transparency if you care about a consistent tile — iOS may fill with black or white unpredictably.
• Do not rely on the old apple-touch-icon-precomposed name for new projects.
• Place the file at /apple-touch-icon.png or link it explicitly as above.

Web App Manifest icons

site.webmanifest (or manifest.webmanifest):

{
  "name": "codefunc",
  "short_name": "codefunc",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#0f766e",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Size	Why
192×192	Minimum common install icon
512×512	Splash / high-DPI; Lighthouse PWA checks
Maskable 512	Safe zone for Android adaptive icons

Maskable icons need important artwork inside ~80% of the canvas so circular/squircle masks do not crop the mark. Generate a separate maskable asset; do not reuse a tight logo PNG.

theme-color and brand chrome

<meta name="theme-color" content="#0f766e" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f8fafc" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a" />

Keep manifest theme_color aligned with the meta tag you want for installed mode. Mismatches look like bugs when users toggle dark mode.

Pair favicon/manifest work with broader head tags via a Meta Tags Generator so Open Graph and icons do not drift.

SVG favicons: power and constraints

SVG favicons scale cleanly and can embed simple prefers-color-scheme styles:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #0f766e; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #5eead4; }
    }
  </style>
  <rect class="mark" width="32" height="32" rx="6" />
</svg>

Caveats:

• Not every legacy context uses SVG — keep PNG fallbacks.
• Overly complex SVGs are pointless at 16×16 — simplify the mark.
• Some browsers mono-chrome the tab icon; test contrast on light and dark tab strips.

Inline and data-URI cases

For email prototypes, Storybook, or tiny demos, you may embed a PNG as a data URI. Use an Image Base64 Encoder for that — not for production homepage favicons. Data-URI favicons bloat HTML, defeat caching, and are harder to update.

Production rule: static files with long-cache filenames or hashed paths, linked from the document head and manifest.

Design tips that survive 16×16

Tip	Reason
One simple glyph or monogram	Detail vanishes in tabs
High contrast mark vs background	Dark/light browser chrome
Padding inside the canvas	Avoid edge clipping on masks
Same brand hue as theme-color	Visual continuity
Test on real iOS + Android	Simulators miss install UI

Dark mode and themed icons

Tabs and installed shells increasingly follow system appearance. Options that work in production:

1. SVG favicon with an embedded prefers-color-scheme fill swap (shown above).
2. Separate PNG sets only if you must support clients that ignore SVG — usually unnecessary for greenfield apps.
3. Manifest theme_color / background_color for the install splash and status bar, independent of the glyph color.

Do not ship a light-gray mark on a transparent background and hope dark tabs will invent contrast. If the glyph is outlined, give it a solid tile behind it at favicon sizes.

Caching and deployment

Icons are aggressively cached. When you rebrand:

• Prefer hashed filenames (icon-192.a1b2c3.png) referenced from the manifest, or
• Bump query strings sparingly (apple-touch-icon.png?v=2026-07) if you cannot hash, and
• Update every HTML entry point that hard-codes /favicon.ico

Service workers that precache /favicon.ico forever will show the old mark after a redesign until the SW updates — include icons in your precache revision strategy.

For Next.js App Router, app/icon.tsx / apple-icon.tsx can generate icons at build time. Still publish a manifest with explicit PNG sizes for installability; do not assume file-based metadata alone covers PWA checks.

Social previews are not favicons

Open Graph and Twitter images are a separate pipeline (typically 1200×630). Reusing a 512×512 app icon as og:image looks sparse and unprofessional in Slack and LinkedIn. Keep:

Surface	Asset
Browser tab	Favicon SVG/PNG
Home screen / PWA	Manifest + apple-touch-icon
Link shares	Dedicated OG image

Wire OG tags alongside icons when you regenerate head markup in a Meta Tags Generator.

Verification checklist

• Tab icon loads on cold visit (hard refresh)
• /favicon.ico or PNG fallback exists if you support odd clients
• apple-touch-icon bookmarks cleanly on iOS
• Manifest icons 192 + 512 return 200
• Maskable asset has safe padding
• theme-color matches light/dark intent
• Lighthouse / installability hints clean for PWA goals
• OG image ≠ favicon — social shares need 1200×630, not 32×32

Practical takeaway

Ship SVG + 32/16 PNG favicons, a 180×180 apple-touch-icon, and manifest icons at 192 and 512 (plus maskable). Align theme-color across meta and manifest. Generate rasters from one master with a Favicon Generator, confirm head markup with a Meta Tags Generator, and reserve Image Base64 Encoder for non-production embeds.

Sources

• MDN: Favicon
• MDN: Web app manifest
• web.dev: Add a web app manifest
• web.dev: Maskable icons
• HTML Living Standard — link types