Favicons et PWA

Les favicons sont les petites icônes que les navigateurs montrent dans les onglets, bookmarks et barres d'adresse. Combinées avec un manifest PWA, elles permettent aux visiteurs d'installer votre site sur leur écran d'accueil comme une app autonome sur mobile et desktop.

Le plugin flexweg-favicon génère tout à partir d'une seule image carrée uploadée. Cette page couvre l'expérience visiteur ; pour la configuration voir la référence du plugin flexweg-favicon.

Ce que les visiteurs obtiennent

Onglets de navigateur

Chaque navigateur affiche la favicon 96×96 PNG à côté du titre de l'onglet :

┌─[ 🟦 Mon Site - Accueil  ]──[ 🟧 Autre onglet     ]─

Bookmarks et historique

La même favicon apparaît dans la liste des bookmarks et l'historique du navigateur. Aide l'utilisateur à reconnaître votre site rapidement.

Écran d'accueil iOS (Apple Touch Icon)

Sur Safari iOS, l'icône 180×180 PNG est utilisée quand l'utilisateur ajoute le site à son écran d'accueil. Fond blanc imposé par Safari (la transparence n'est pas supportée).

Écran d'accueil Android (PWA)

Sur Chrome Android, le manifest PWA active le prompt « Ajouter à l'écran d'accueil » après quelques visites. L'icône 192×192 ou 512×512 (selon la résolution de l'écran) est utilisée.

Mode plein écran PWA

Quand l'utilisateur lance le site depuis son écran d'accueil sur Android (ou Safari iOS si configuré), le site s'ouvre sans barre d'adresse du navigateur — comme une vraie app. Le manifest PWA contrôle ça.

Le manifest PWA

site.webmanifest contient :

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

L'admin l'édite via les réglages du plugin. Les theme_color (couleur du bandeau navigateur sur Android) et background_color (couleur d'arrière-plan du splash screen PWA) sont configurables.

Limitations PWA

Sans service worker, votre site PWA :

• N'est pas hors-ligne capable (le navigateur affiche un écran d'erreur si pas de réseau)
• Ne reçoit pas de notifications push

Pour ajouter ces fonctionnalités, écrivez un plugin custom qui injecte un service worker via flexweg-custom-code. Mais ça nécessite du JavaScript dédié et casse l'invariant « tout statique ».

Test d'installation

Pour vérifier que votre PWA est installable :

1. Ouvrez votre site sur Chrome desktop ou Android
2. Dev Tools → onglet Application → Manifest — devrait charger sans erreur
3. Sur mobile, après quelques visites, prompt « Ajouter à l'écran d'accueil » devrait apparaître

Si quelque chose ne va pas, le panel Application liste les erreurs (icône manquante, taille trop petite, etc.).

Limitations favicon

• Une seule favicon par site — pas de variante par section
• Pas de mode sombre auto — pas de variante prefers-color-scheme: dark
• Pas d'animated favicon (APNG / GIF)

Pour ces besoins exotiques, désactivez l'injection auto via les réglages et injectez vos <link> via flexweg-custom-code.