Identiteit

Favicon en app-iconen

Eén beeldmerk, elk browservlak

De favicon in het tabblad, het beginschermicoon van iOS en de PWA-iconen van Android worden alle drie als statische bestanden in de root van de site uitgeleverd. De SVG-favicon van vandaag gebruikt het merkblauwe palet (icoonvariant "dark"), zodat de favicon leesbaar blijft op een lichte browserbalk. PNG-varianten dekken oudere browsers en de platformen die rasterbestanden nodig hebben.

Bestanden die we vandaag uitleveren

  • favicon.svg

    favicon.svg · vector

    Moderne browsers geven de voorkeur aan de SVG. Dit is nu nog het historische merkblauwe beeldmerk - bij een toekomstige migratie kan dit uit UnlessIcon worden gegenereerd.

  • favicon-32x32

    favicon-32x32.png

    De klassieke tabbladfavicon voor browsers die de SVG niet aankunnen.

  • favicon-96x96

    favicon-96x96.png

    Formaat voor bladwijzers en snelkoppelingen - desktopbrowsers, de tegels op een nieuw tabblad in Chrome.

  • apple-touch-icon

    apple-touch-icon.png · 180 × 180

    Het icoon voor "Zet op beginscherm" in iOS. Apple voegt zelf geen glans of afgeronde hoeken meer toe - lever dus een vlak vierkant aan.

  • manifest 192

    web-app-manifest-192x192.png

    Het beginschermicoon van Android (maskable). Staat vermeld in site.webmanifest.

  • manifest 512

    web-app-manifest-512x512.png

    Het splashscreen van Android en het installatie-icoon van de PWA (maskable). Hetzelfde icoon als de 192 hierboven, in hogere resolutie.

  • favicon.ico

    favicon.ico · meerdere resoluties

    Terugvaloptie voor oudere systemen. Bevat 16, 32 en 48 px in één .ico-container.

site.webmanifest

Legt vast hoe de PWA installeerbaar is - naam, thema, maskable iconen.

{
  "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"
}

Verwijzingen in de HTML-

<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" />

Altijd de nieuwste

Elk bestand hierboven komt uit hetzelfde centrale recept dat ook het live beeldmerk van Unless op de hele site aanstuurt - dezelfde geometrische constanten, hetzelfde palet, dezelfde veilige marge voor de maskable iconen van Android. Verander je in dat recept een kleur of een curve, dan worden alle bestanden in één beweging opnieuw gemaakt: elke favicon, elk app-icoon, elke logocombinatie en elk logo dat bezoekers te zien krijgen. Zo groeit de familie nooit uit elkaar.

Logocombinaties
Monotile-achtergrond · Einstein