Frontend Beauty
ESC

Type to search the knowledge base.

Favicon and App Icons

Ship favicons and app icons that work across browsers — SVG/ICO/PNG sizes, apple-touch-icon, manifest icons, and cache gotchas.

beginner3 min read
  • html
  • favicon
  • icons

Favicons are tiny branding with outsized “does this site look legit?” impact. The ecosystem is fragmented: browser tabs, bookmarks, iOS home screen, PWA install, and Google search results all pick different assets.

Docs: MDN favicon, web app manifest icons, Apple touch icon notes.

Modern baseline

<head>
  <link rel="icon" href="/favicon.ico" sizes="32x32" />
  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

Practical set many teams ship:

Asset Role
favicon.ico Legacy / hard-coded /favicon.ico requests
SVG favicon Crisp multi-size tab icon where supported
32×32 / 16×16 PNG Fallbacks
180×180 apple-touch-icon iOS home screen
192 & 512 PNG in manifest PWA / Android install

SVG favicons

<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<!-- icon.svg: keep simple shapes; avoid tiny text -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#0b6bcb"/>
  <path fill="#fff" d="M8 22 V10 h4.5c3 0 5 1.5 5 4s-2 4-5 4H12v4H8zm4-7h.5c1.2 0 2-.6 2-1.5S13.7 12 12.5 12H12v3z"/>
</svg>

Dark-mode adaptive SVG can use CSS prefers-color-scheme inside the SVG file for some browsers.

Manifest snippet

{
  "name": "Frontend Beauty",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Maskable icons need safe-zone padding so Android masks don’t crop the logo.

Common failures

  1. Only a 16×16 blurry PNG on retina.
  2. Forgetting /favicon.ico while search/bots request it.
  3. Caching forever — users never see logo updates (?v=3 or hashed names).
  4. Transparent PNG that vanishes on dark browser chrome — test both.
  5. Using a photo as a favicon — becomes mud.

HTML placement

Put icon links early in <head>. Order among icon links is less critical than correct types and sizes, but keep them with other metadata.

Interview out-loud

“I ship an ICO or PNG for legacy, SVG where supported, apple-touch-icon for iOS, and manifest icons for PWA. Icons should be simple, high-contrast, and cache-busted on brand changes. Maskable icons need padding for Android adaptive icons.”

Footguns

  1. Wrong MIME type on SVG icons.
  2. 180×180 apple icon missing — iOS screenshot fallback looks bad.
  3. Absolute CDN URLs without CORS/caching strategy.
  4. Theme-color meta clashing with icon branding.
  5. Assuming one PNG covers every platform.

Cache busting

<link rel="icon" href="/favicon.ico?v=2026-08-04" sizes="any" />
<link rel="icon" href="/icon.svg?v=2026-08-04" type="image/svg+xml" />

Or fingerprint filenames in the build (icon.a1b2.svg). Browsers cache favicons aggressively; without busting, stakeholders will swear the logo never updated.

Theme-color companion

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

Complements icons on mobile browser chrome. Keep brand consistency between theme-color and icon background.

SVG dark-mode favicon sketch

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

Support varies; still ship PNG fallbacks. Keep shapes simple — hairline logos disappear at 16px.

Further reading

Related guides