Identité

Favicon et icônes d'application

Une marque, chaque surface de navigateur

Le favicon d'onglet du navigateur, l'icône d'écran d'accueil iOS et les icônes PWA Android sont tous publiés comme fichiers statiques à la racine du site. Le favicon SVG actuel utilise la palette bleu de marque (icône « sombre ») afin de bien se lire sur les interfaces de navigateur claires. Les alternatives PNG couvrent les navigateurs historiques et les plateformes qui exigent des icônes matricielles.

Fichiers publiés aujourd'hui

  • favicon.svg

    favicon.svg · vectoriel

    Les navigateurs modernes privilégient le SVG. Il s'agit actuellement de la marque historique bleu de marque - une future migration pourrait le générer depuis UnlessIcon.

  • favicon-32x32

    favicon-32x32.png

    Favicon d'onglet classique pour les navigateurs qui ne résolvent pas le SVG.

  • favicon-96x96

    favicon-96x96.png

    Taille signet / raccourci - navigateurs de bureau, tuiles de nouvel onglet Chrome.

  • apple-touch-icon

    apple-touch-icon.png · 180 × 180

    Icône « Ajouter à l'écran d'accueil » iOS. Apple n'ajoute plus le lustré ni les coins arrondis - publier un carré uni.

  • manifest 192

    web-app-manifest-192x192.png

    Icône d'écran d'accueil Android (maskable). Référencée par site.webmanifest.

  • manifest 512

    web-app-manifest-512x512.png

    Icône d'écran de démarrage et « installation » PWA Android (maskable). Version haute résolution de la 192 ci-dessus.

  • favicon.ico

    favicon.ico · multi-résolution

    Alternative héritée. Contient les résolutions 16 / 32 / 48 px dans un seul conteneur .ico.

site.webmanifest

Déclare la surface installable de la PWA - nom, thème, icônes maskables.

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

Références dans le 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" />

Toujours à jour

Chaque fichier ci-dessus est généré à partir de la même recette centrale qui pilote la marque Unless sur l'ensemble du site - mêmes constantes géométriques, même palette, même marge de zone sûre pour les icônes Android maskables. Modifier une couleur ou une courbe dans cette recette régénère tous les favicons, icônes d'application, logotypes et logos visibles du client, en parfaite synchronisation.

Compositions
Fond monotile · Einstein