Next Surfaces · Monotile background

Favicon & app icons

One mark, every browser surface

The browser tab favicon, the iOS home-screen icon, and the Android PWA icons all ship as static files under public/. Today's SVG favicon uses the brand-blue (icon "dark") palette so it reads on light browser chrome. PNG fallbacks cover legacy browsers + the platforms that need raster icons.

Files shipped today

  • favicon.svg

    favicon.svg · vector

    Modern browsers prefer the SVG. Currently the historical brand-blue mark - a future migration could emit this from UnlessIcon.

  • favicon-32x32

    favicon-32x32.png

    Classic tab favicon for browsers that don't resolve the SVG.

  • favicon-96x96

    favicon-96x96.png

    Bookmark / shortcut size - desktop browsers, Chrome new-tab tiles.

  • apple-touch-icon

    apple-touch-icon.png · 180 × 180

    iOS home-screen "Add to Home" icon. Apple no longer adds the gloss / rounded corners - ship a plain square.

  • manifest 192

    web-app-manifest-192x192.png

    Android home-screen icon (maskable). Referenced by site.webmanifest.

  • manifest 512

    web-app-manifest-512x512.png

    Android splash + PWA "install" icon (maskable). Higher-resolution mate of the 192 above.

  • favicon.ico

    favicon.ico · multi-resolution

    Legacy fallback. Carries 16 / 32 / 48 px inside a single .ico container.

site.webmanifest

Declares the PWA installable surface - name, theme, maskable icons.

{
  "name": "Unless",
  "short_name": "Unless",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

HTML references

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Always the latest

Every file above is emitted from the same central recipe that drives the live Unless mark across the site - same geometry constants, same palette, same safe-zone padding for the maskable Android icons. Bumping a colour or a curve in that recipe regenerates every favicon, app icon, lockup, and consumer-facing logo in lockstep, so the family never drifts apart.