Web Icons in 2026: Touch Icons, Adaptive Icons & manifest.json

Managing icons on iOS and Android, understanding maskable icons, and building a robust web manifest file. This article is the second part of the Web Icons in 2026 guide.

I. Definitions

1. Touch Icon (Apple)

A Touch Icon is the icon displayed on the iOS home screen when a user adds a website to it via Safari. It is declared via the apple-touch-icon attribute in an HTML <link> tag:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Apple automatically applies rounded corners and gloss effects depending on the iOS version, your icon should be a square without pre-applied rounding. The recommended size is 180x180px (for Retina @3x screens).

2. Adaptive Icon (Android)

On Android, icons can be adaptive: the system applies a shape (circle, squircle, teardrop, square) depending on the launcher and manufacturer. A maskable web icon should fill the entire square canvas, with the important content inside the central safe zone.

This is what the purpose: "maskable" property in manifest.json signals.

3. Web App Manifest

The manifest.json (or .webmanifest) is a JSON file that provides the browser with metadata about your web application: name, colors, icons, display mode, etc. It is essential for PWA (Progressive Web App) behavior.

<link rel="manifest" href="/manifest.json">

II. Formats, Dimensions and Rules

1. Apple (iOS)

File	Size	Usage
`apple-touch-icon.png`	180x180px	iOS home screen (Retina @3x)

PNG format with transparent or solid background
Square, no pre-applied rounded corners
iOS applies rounding automatically

2. Android & Windows (Chrome, Edge, PWA)

File	Size	Usage
`icon-192.png`	192x192px	Android launcher, PWA shortcut
`icon-512.png`	512x512px	PWA splash screen
`icon-maskable-512.png`	512x512px	Android adaptive icon

3. Classic Icons vs Maskable Icons

A classic icon has a transparent background: the operating system displays it as-is, without applying a shape. The result depends entirely on the launcher.

A maskable icon fills the entire canvas with a solid background. The system clips it to its preferred shape (circle, squircle, etc.). This gives you a more intentional result across Android launchers.

Safe zone rule: the important content (logo, symbol) must fit inside the central 80% of the surface. The outer 20% may be cropped depending on the shape applied.

4. Readability at Different Sizes

192x192px: displayed at ~48px on screen. The icon must remain legible at small sizes.
512x512px: used for splash screens during PWA loading. Can be more detailed.
Maskable: always design with the 80% safe zone in mind, test with circle and squircle shapes.

III. Declaring Icons: manifest.json and `<link>` Tags

1. manifest.json Structure

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "var(--bux-white)",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icon-maskable-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ]
}

Key points:

purpose: "maskable" tells the system the icon is safe to clip
Both icon-512.png and icon-maskable-512.png can coexist, the browser picks the right one
All icon files should be at the root of your site

2. HTML `<head>` Integration

The complete modern setup, combining favicon, touch icon, and manifest:

<!-- Favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">

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

<!-- PWA manifest -->
<link rel="manifest" href="/manifest.json">

That's 4 lines of HTML covering the main modern web icon surfaces.

IV. Conclusion

With this setup, you cover:

Desktop browsers and search results (Chrome, Firefox, Edge, Safari, Google Search) -> favicon.svg + favicon-96.png
iOS home screen -> apple-touch-icon.png (180x180)
Android PWA launcher -> icon-192.png via manifest
PWA splash screen -> icon-512.png via manifest
Android adaptive icons -> icon-maskable-512.png via manifest

A total of 5 image files and 4 HTML lines is a lean modern stack for many web projects in 2026.

Want to generate this lean icon set automatically? That's exactly what WebIconKit does, try the generator.