Favicon & PWA Icons: The Complete Setup Guide for 2026

Favicons should be simple. You create a small icon, drop it in your root directory, and you’re done. Except it’s never that simple. Between browser tabs, bookmarks, iOS home screen shortcuts, Android PWA installs, Windows tiles, and Google search result icons, you need at least six different files in four different formats at eight different sizes.

I’ve set this up from scratch more times than I care to count, and every time I end up researching the same questions: What sizes do I need? What format? Does Safari still need apple-touch-icon? (Yes.) Here’s the definitive guide so neither of us has to look this up again.

What You Actually Need in 2026

The good news: you don’t need as many files as guides from 2020 suggest. Here’s the minimal-but-complete set:

File	Size	Format	Purpose
`favicon.ico`	16×16, 32×32, 48×48	ICO (multi-resolution)	Legacy browsers, Google search results
`favicon.svg`	Scalable	SVG	Modern browsers (scales to any size)
`apple-touch-icon.png`	180×180	PNG	iOS home screen (Safari)
`icon-192.png`	192×192	PNG	Android home screen, PWA install
`icon-512.png`	512×512	PNG	PWA splash screen, app stores
`site.webmanifest`	—	JSON	PWA configuration

That’s five image files and one JSON manifest. Everything else you see in older guides (mstile-150x150, browserconfig.xml, 36 different PNG sizes) is either deprecated or handled automatically by browsers.

The HTML You Need

Add this to your <head> tag:

<!-- Favicon: SVG for modern browsers, ICO for legacy -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- Apple Touch Icon: iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest: PWA and Android -->
<link rel="manifest" href="/site.webmanifest">

<!-- Optional: Theme color for browser chrome -->
<meta name="theme-color" content="#0a0a0a">

That’s it. Six lines in your HTML and you’re covered across every major platform.

Setting Up Each File

1. favicon.svg — The Modern Default

SVG favicons are supported in Chrome, Firefox, Edge, and Safari 15+. They scale perfectly to any size and, most importantly, they support prefers-color-scheme for automatic dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

A dark mode favicon is a small detail, but it’s the kind of polish that makes a site feel professional. When I browse in dark mode and a site’s favicon is a white logo on a transparent background that disappears against my dark browser tab — that’s a missed opportunity.

2. favicon.ico — For Legacy Browsers

The ICO format is the one format every browser has supported since the beginning. Your ICO file should contain three sizes: 16×16, 32×32, and 48×48. This covers browser tabs (16px), bookmarks (32px), and Windows taskbar (48px).

You can create multi-resolution ICO files with ImageMagick:

convert icon-16.png icon-32.png icon-48.png favicon.ico

Or just use our Favicon Generator, which creates the ICO from a single source image automatically.

3. apple-touch-icon.png — iOS Home Screen

When someone adds your site to their iOS home screen, Safari looks for apple-touch-icon.png. This must be exactly 180×180 pixels. If you skip this, iOS will take a screenshot of your page and use that as the icon — which looks terrible.

Key points:

Don’t add rounded corners. iOS applies the rounded-rect mask automatically.
Don’t add transparency. iOS fills transparent areas with black.
Use a solid background color that matches your brand.
Keep the design simple. This icon appears at roughly 60×60 CSS pixels on most devices.

4. PWA Icons — icon-192.png and icon-512.png

For Progressive Web App installs, you need at least 192×192 and 512×512 PNG icons. These are referenced in your web manifest:

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#0a0a0a",
  "background_color": "#0a0a0a",
  "display": "standalone",
  "start_url": "/"
}

The 512×512 icon is used for the splash screen that appears while a PWA loads. If you only provide 192×192, Android will scale it up and it’ll look blurry.

5. Maskable Icons (Optional but Recommended)

Android’s adaptive icon system uses “maskable” icons — icons where the important content stays within a safe zone (the inner 80% of the image), allowing the OS to apply different shape masks (circle, squircle, etc.) without cutting off important parts.

{
  "src": "/icon-512-maskable.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

To create a maskable icon, ensure your logo sits within the center 80% of the canvas, with the brand background color filling the entire image. Google’s Maskable.app lets you preview how the icon looks with different masks.

Common Mistakes

Mistake 1: Forgetting apple-touch-icon

This is by far the most common oversight. Without it, iOS users who add your site to their home screen see an ugly page screenshot instead of your logo. I’ve seen this on production sites from companies worth millions.

Mistake 2: Using Low-Resolution Source Images

If your source image is 64×64, scaling it up to 512×512 produces a blurry mess. Always start with the highest resolution possible (at least 512×512) and scale down. Vector (SVG) sources produce the best results at every size.

Mistake 3: Not Testing on Actual Devices

Favicons look different on every platform. The same icon that looks perfect in a Chrome tab can look terrible on an iOS home screen because of the padding and mask differences. Test on:

Chrome, Firefox, Safari desktop tabs
iOS Safari (add to home screen)
Android Chrome (add to home screen, PWA install)

Mistake 4: Transparent Backgrounds on iOS

Apple Touch Icon doesn’t support transparency. If your icon PNG has a transparent background, iOS fills it with black — which almost certainly isn’t what you want. Always use a solid background color.

Mistake 5: Ignoring Dark Mode

In 2026, the majority of developers use dark mode. If your favicon is a dark logo on a transparent background, it’s invisible in dark browser tabs. Use an SVG favicon with prefers-color-scheme support, or choose a logo color that works on both light and dark backgrounds.

The Quick Setup Workflow

Here’s my workflow for setting up favicons on a new project:

Start with a high-res source — ideally SVG, otherwise at least 512×512 PNG
Drop it into the Favicon Generator — get all sizes, the HTML snippet, and the web manifest in one download
Add the HTML to your <head> — six lines, copy-paste
Test in browsers — check Chrome, Safari, and mobile
Commit and done — the whole process takes under 5 minutes

Favicon and SEO

Google shows favicons in mobile search results next to your site name. A missing or broken favicon makes your listing look unprofessional compared to competitors with polished icons. Google sources the favicon from:

The <link rel="icon"> tag in your HTML
/favicon.ico at the root of your domain

Make sure both exist. Google caches favicons aggressively, so if you update your favicon, it may take weeks to appear in search results. You can request a re-crawl through Google Search Console to speed this up.