Favicon and app icon complete guide 2026 (every size, every platform)

The favicon isn't a favicon anymore

What we call "the favicon" is actually 6-10 different files, each targeting a different context: browser tab, bookmark bar, iOS home screen, Android home screen, PWA installer, Windows tile, RSS reader, browser history, search results.

The right approach in 2026:

• 1 SVG - modern browsers prefer this; scales to any size.
• favicon.ico - 3 sizes (16, 32, 48) packed into one file. Ancient browsers and RSS readers still request this.
• PNG 180×180 - apple-touch-icon for iOS home screen.
• PNG 192×192 + 512×512 - PWA icons for installable web apps.
• Optional PNGs 16, 32, 48, 64, 96, 128 - for specific browser and platform quirks.

That's the full set. Favicon Generator produces every one from a single source image, plus the HTML <link> block for your <head>.

Why favicon.ico still exists

The .ico format predates PNG on the web. Every browser released since 1999 has requested /favicon.ico from the site root even when you specify PNG favicons via <link> tags - the request is baked into the browser's URL bar and bookmark logic. A missing favicon.ico produces a 404 in your logs for every visit.

Modern .ico files aren't the old BMP-in-container format; they're PNG-in-container (allowed since Windows Vista). Favicon Generator packs 16, 32, and 48 PNGs into a proper multi-size .ico that renders crisply in every context.

The HTML <head> block

The minimum-viable modern favicon setup:

<link rel="icon" href="/favicon.ico" sizes="any">
<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">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Five <link> tags cover every modern browser and OS. The sizes="any" on the .ico is important - it prevents modern browsers from downloading the .ico when they already have the SVG.

Apple Touch Icon

iOS Safari looks for apple-touch-icon.png when a user adds your site to their home screen. Without one, iOS uses a screenshot of your page - usually terrible. Ship it.

Size: 180 × 180 PNG. iOS auto-applies rounded corners; don't pre-round the image or it'll show a double corner.

Web app manifest (PWA)

site.webmanifest (or manifest.json) makes your site installable as a PWA on Android, ChromeOS, Windows, and macOS. Minimum:

{
  "name": "Your 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": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

The 192 and 512 PNG sizes are hard requirements - Chrome's install prompt won't fire without both.

Maskable icons

Android and ChromeOS may crop your icon to whatever shape their launcher wants (circle, squircle, rounded square). Regular icons get cropped uncomfortably.

The fix is a maskable icon: same PNG, but with 10% safe-zone padding on all sides. Add "purpose": "maskable" to that entry in the manifest:

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

You can ship both - regular icons for Windows/macOS installs, maskable for Android - and let the platform pick.

The iOS app icon set

Every native iOS app needs an AppIcon.appiconset with 15+ sized PNGs and a Contents.json manifest that Xcode reads. The sizes are non-negotiable:

• 20 × 20 (notifications), 40 × 40 (notifications @2x), 60 × 60 (notifications @3x)
• 29 × 29 (settings), 58 × 58 (settings @2x), 87 × 87 (settings @3x)
• 40 × 40, 80 × 80 (spotlight @2x), 120 × 120 (spotlight @3x)
• 60 × 60, 120 × 120 (app @2x), 180 × 180 (app @3x)
• 76 × 76, 152 × 152 (iPad app @2x), 167 × 167 (iPad Pro @2x)
• 1024 × 1024 (App Store marketing)

Do not include an alpha channel in iOS icons - the App Store rejects them.

App Icon Generator produces all 15 from a single 1024 × 1024 source, with the Contents.json in the right shape, packed as a zip you drag straight into Xcode's Assets.xcassets.

The Android launcher icon set

Android uses density buckets - each one is a specific pixel size for a specific screen density:

• mipmap-mdpi - 48 × 48 (baseline)
• mipmap-hdpi - 72 × 72
• mipmap-xhdpi - 96 × 96
• mipmap-xxhdpi - 144 × 144
• mipmap-xxxhdpi - 192 × 192
• Plus a 512 × 512 for the Play Store listing.

Android 8+ also supports adaptive icons (foreground + background layers that can be masked by the launcher). Full adaptive icons need XML setup beyond a single PNG - but a well-designed 512 × 512 with a safe zone works fine as a fallback for every launcher.

App Icon Generator exports the mipmap folder structure ready to drop into your Android project's res/ directory.

Design tips that hold up across platforms

1. Keep the design centered. iOS rounds corners; Android may crop to a circle. Anything in the outer 10% will be clipped somewhere.

2. Avoid text. At 48 × 48, no text is readable. Icons should communicate visually.

3. High contrast between subject and background. Your icon competes with 200+ other icons on a home screen. A subtle two-tone gradient loses; a bold single subject wins.

4. Test at actual size. Preview your icon at 48 × 48. If it's unrecognizable there, redesign.

5. Match your product's visual identity. The icon is the first pixel a user sees. It should feel like the app they'll open.

Placeholder icons for prototyping

While the design is still in flux, Placeholder Image Generator creates solid-color squares with a label - perfect for "just get me something in the icon slot" during early prototyping. Swap to the real icon set once design is locked.

The complete workflow

Building a shipping icon set for a web app or PWA:

1. Design a 1024 × 1024 master PNG in Figma or Sketch.
2. App Icon Generator → drops iOS AppIcon.appiconset, Android res/mipmap folders, PWA icons.
3. Favicon Generator → drops favicon.ico + web PNG sizes + head snippet.
4. Paste the head snippet.
5. Verify with a tool like realfavicongenerator.net's checker, or just Chrome DevTools' Application tab.

Total time: about 5 minutes. Total files generated: 20-30. The alternative (hand-crafting each size in Photoshop) takes an hour and reliably ships one at the wrong resolution.

Related tools

• Favicon Generator - web favicon package.
• App Icon Generator - iOS, Android, PWA app icon sets.
• Image Converter - for the format conversions along the way.
• Image Resizer - if you need arbitrary sizes not in the standard sets.
• Placeholder Image Generator - for the "we haven't finalized the icon yet" phase.