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 - een toekomstige migratie kan dit uit UnlessIcon laten komen.

  • 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). Dezelfde tegenhanger als de 192 hierboven, in hogere resolutie.

  • favicon.ico

    favicon.ico · meerdere resoluties

    Terugval 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 elke favicon, elk app-icoon, elke logocombinatie en elk logo dat bezoekers te zien krijgen in één beweging opnieuw gemaakt. Zo groeit de familie nooit uit elkaar.

Logocombinaties
Monotile-achtergrond · Einstein