Un favicon est une petite icône qui représente votre site web dans les onglets du navigateur. Pour les Progressive Web Apps (PWA), vous avez également besoin d'un manifeste web et d'icônes plus grandes pour les écrans d'accueil mobiles.
Installer les fichiers favicon et les icônes PWA
Le ZIP Web contient favicon.ico, des PNG de 16/32 px, une icône Apple touch de 180 px, des icônes PWA de 192/512 px, site.webmanifest et og.png de 1200x630.
Contenu du ZIP Web
Les deux PNG PWA sont des icônes carrées classiques. Leurs noms et tailles correspondent au tableau icons de site.webmanifest ; og.png est une image de partage distincte.
Relier les icônes à votre site
- Copiez les fichiers de Web dans le dossier public et publiez-les à la racine du domaine, ou adaptez les chemins au dossier choisi.
- Modifiez name et short_name dans site.webmanifest. start_url et scope sont relatifs au manifeste ; les chemins exportés des icônes commencent par /. Adaptez-les si les images sont dans un sous-dossier.
- Ajoutez les liens du manifeste, du favicon et d'Apple touch dans le head HTML. Utilisez HTTPS ou localhost. Dans les outils du navigateur, vérifiez le manifeste et que chaque URL retourne une image, pas une page HTML de repli.
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Ces icônes ne sont pas préparées comme images maskable. Le ZIP n'ajoute ni service worker ni fonctionnement hors ligne ; les icônes seules ne garantissent pas l'installation. Testez le navigateur et l'appareil visés.
Lire le guide d'intégration Web, PWA et Chrome