apple-touch-icon and Icons in 2026: The Right Icon Stack

In the early 2010s it was fashionable to stuff every site's <head> with 20 lines of icon declarations: 16 favicon sizes, 9 apple-touch sizes, MS Tile for Windows 8 live tiles, Chrome and Microsoft manifests. By 2026 all of that has been simplified — but not everywhere. Many sites still carry an outdated "icon wall" that does nothing except clutter the HTML.

This article covers the minimum viable icon stack for 2026.

What is apple-touch-icon

The original purpose was simple: the icon that appears on the iPhone/iPad home screen when a user saves a site via "Add to Home Screen". Apple introduced this mechanism in iOS 4, and for a long time it was the only native alternative to installing an app.

As PWA (Progressive Web Apps) and manifest.webmanifest matured, some of that functionality moved there. But apple-touch-icon is still used by Safari on iOS — it does not read webmanifest for the home screen.

Minimum Icon Stack in 2026

A modern website realistically needs:

favicon.ico or icon (any format) — for the browser tab. 32×32 is enough.
apple-touch-icon 180×180 — for iOS "Add to Home Screen"
manifest.webmanifest with icons at 192 and 512 — for Android and Chrome PWA

That's it. Three files. Not nineteen.

In HTML:

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

If you are using Next.js 13+/14+ App Router — this is handled via convention files (app/icon.tsx, app/apple-icon.tsx, app/manifest.ts) and Next.js inserts the correct tags automatically.

apple-touch-icon Sizes

A single 180×180 file covers all current iOS devices:

iPhone 6+ (iPhone 14, 15, 16) — 180×180
iPad Pro — 167×167 (downscaled from 180)
Older iPhones (iPhone SE before 2016) — 152×152 (downscaled)

In the past, separate tags were added to the HTML for each size:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
...

This is an outdated practice. In 2026, every iOS device that actually visits your site understands sizes and picks the nearest appropriate size. One 180×180 file is the optimum.

Manifest.webmanifest

The metadata file for PWA. The minimum required set:

{
  "name": "Bcorrections",
  "short_name": "Bcorre",
  "description": "SEO in the AI Era",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f5f6f8",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

purpose: "any maskable" means the icon can be cropped into a circle or square — Android adapts it accordingly.

What to Do with MS Tile (for Windows)

Internet Explorer and legacy Edge allowed users to "pin" a site to the Windows 8 Start screen as a live tile. This required a browserconfig.xml and a set of tags:

<meta name="msapplication-TileColor" content="#4f46e5">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

In 2026 you can safely delete all of this:

Windows 8 reached EOL in 2023
Legacy Edge was replaced by Edge Chromium in 2020
The live tile interface was removed in Windows 11

Remove all msapplication-* tags from your <head> if they are still there. That is 5–7 lines of HTML gone, with zero regressions.

SVG Favicon — the Modern Standard

Since 2024, all current browsers support SVG favicons:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" sizes="any" href="/favicon.ico">

The browser uses SVG if supported, otherwise falls back to ICO. SVG scales perfectly on retina displays, supports dark mode (you can use CSS media queries inside the SVG to switch colors), and weighs 1–2 KB.

One caveat: Safari occasionally misrenders complex SVG files. Simple geometric icons (a letter in a circle, an abstract symbol) work everywhere.

Dark Mode for the Icon

An SVG favicon can respond to the system dark mode preference:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-fill { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      .icon-fill { fill: #a5b4fc; }
    }
  </style>
  <circle class="icon-fill" cx="16" cy="16" r="14" />
</svg>

Users with a light system theme see one icon color in the browser tab; users who have switched to dark mode see another. It is the kind of detail that separates a premium site from a templated one.

Do You Still Need favicon.ico

Technically, in 2026 you can get by without it — modern browsers understand <link rel="icon" href="/icon.png"> without requiring the .ico format.

That said, we recommend keeping it as a fallback:

Corporate browsers on Windows sometimes request /favicon.ico directly (without reading the HTML)
Old RSS aggregators and feed readers expect .ico
Search engine crawlers cache favicons

Put a 32×32 ICO file in the site root (on the server, not a CDN-only public path) — that is the standard approach.

Pitfalls

Icon served over HTTPS, but HTML over HTTP (or vice versa) — the browser will not display it
Cross-origin URL — for example, an icon hosted on a CDN from a different domain. Browsers may block it (mixed content rules)
Transparent background in apple-touch-icon — iOS will fill it with black. Use an opaque background (your brand color)
Rounded corners in apple-touch-icon — iOS will clip the icon into a rounded square on its own. If you pre-clipped it, you get double rounding. Supply a full square
Unoptimised PNG files — a favicon that weighs 50 KB instead of 2 KB. Run it through pngquant or imagemin

Removing the Bloat

Audit your <head>. Remove:

All msapplication-* tags
All apple-touch-icon tags with sizes other than 180×180
All apple-touch-icon-precomposed tags (deprecated since iOS 7)
All apple-touch-startup-image tags — the PWA splash screen, only relevant if you are building an installable PWA
browserconfig.xml (Microsoft)

Replace everything with the minimal stack described above. Save 10–15 lines in the <head> of every page.

Summary

In 2026, three files are enough: favicon (SVG + ICO fallback), apple-touch-icon at 180×180, and manifest.webmanifest with icons at 192/512. Everything else is a relic of past eras that can be safely removed.

If your <head> has 30 lines of icon declarations and you are not sure why — get in touch. We will clean it up and run a full audit in a couple of hours.