flexweg-favicon (must-use)

flexweg-favicon transforme une seule image carrée uploadée en l'ensemble complet favicon + PWA manifest que chaque navigateur moderne attend, puis injecte les <link> correspondants dans chaque page publiée.

Il est must-use parce que chaque site public bénéficie des favicons — le coût de l'avoir toujours actif c'est un cluster <link> par page, et le bénéfice c'est « votre site ressemble à un vrai site dans les onglets et bookmarks ».

Ce qu'il génère

À partir d'une seule image source uploadée (PNG / JPG / WebP / SVG) :

Si l'image source est un SVG, le favicon.svg est uploadé tel quel. Sinon il n'est pas généré.

Page de réglages

/settings/plugin/flexweg-favicon expose :

Onglet Image source

• Media picker pour choisir l'image (au format carré recommandé, ≥ 512×512)
• Bouton Generate all sizes — lance le processing
• Compteur de variantes générées — quels formats sont actuellement disponibles

Onglet PWA

• Nom de l'app — affiché quand l'utilisateur installe le PWA
• Couleur de fond — couleur PWA primaire
• Theme color — pour le bandeau navigateur sur Android Chrome
• Bouton Re-upload manifest — sans re-processer l'image (utile pour juste changer le nom / couleur)

Hook utilisé

Le plugin enregistre un seul filtre page.head.extra qui injecte les <link> tags :

<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png?v=...">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=...">
<link rel="manifest" href="/favicon/site.webmanifest?v=...">
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg?v=...">  <!-- si SVG dispo -->

Les URLs ont un cache-bust ?v=<uploadedAt> pour que les navigateurs ré-fetchent après un upload.

L'injection est conditionnelle sur les flags hasIco, hasSvg, hasPng96, etc. — donc seuls les tags pour les fichiers réellement présents sont émis.

Processing pipeline

Image source → createImageBitmap côté navigateur → canvas resize cover-crop pour chaque taille → encode en WebP (ou PNG pour le favicon-96x96) → upload.

Le favicon.ico est packagé via un encoder pur-JS (icoEncoder.ts) qui prend les variantes 16/32/48 et les concatène dans le format multi-taille ICO.

SVG

Si vous uploadez un SVG :

• Pass-through (pas de processing)
• Mais le favicon-96x96.png, apple-touch-icon.png, web-app-manifest-* sont quand même générés via canvas (rasterise le SVG)
• Le favicon.ico n'est pas généré (pas de support multi-taille raster depuis SVG)

Donc upload un SVG vous donne le meilleur des deux mondes : vector pour les navigateurs modernes (Firefox, Chrome récents), raster pour les anciens (Safari iOS).

Désactivation

Pas possible — must-use. Pour ne pas avoir de favicon, ne uploader aucune image — les <link> ne sont pas injectés.

Limitations

• Une seule image source — pas de chemin pour avoir un favicon différent par section du site
• Pas de favicon animé — APNG/GIF non supportés
• Pas de mode sombre — pas de variante automatique pour prefers-color-scheme: dark

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

Cas d'usage typique

1. Uploader le logo carré du site (idéalement 1024×1024 SVG ou 512×512 PNG transparent)
2. Cliquer Generate all sizes
3. Cliquer Regenerate site → All HTML pages pour appliquer aux pages existantes
4. Ouvrir le site public dans un navigateur → forced refresh (Cmd+Shift+R) → la favicon apparaît dans l'onglet

Pour les sites multilingues : la même favicon est utilisée toutes langues confondues. C'est OK pour la plupart des marques.