Icône PWA inchangée : vérifier manifeste, fichiers et cache

Si l’icône d’une PWA ne change pas, inspectez d’abord le manifeste et les images réellement reçus par le navigateur. Remplacer le favicon de l’onglet ne remplace pas nécessairement l’icône d’une application installée. Les déclarations et caches de ces ressources peuvent être différents.

Le générateur de favicon et PWA prépare les fichiers et un manifeste de départ. Lors de leur publication, faites correspondre les chemins déclarés à l’emplacement effectif des images.

Distinguez l’onglet de l’application installée

La déclaration HTML de favicon sert à l’onglet. Les entrées du manifeste décrivent les images de l’application web. Une page peut donc afficher la nouvelle image tandis qu’un raccourci installé conserve une autre icône.

Notez où le problème apparaît : onglet, proposition d’installation, lanceur ou application déjà installée. Ajoutez navigateur et système d’exploitation. Ce relevé transforme un signalement vague en vérification reproductible et évite de modifier la mauvaise ressource.

Trouvez le manifeste lié par la page

Inspectez le lien de manifeste dans la page et ouvrez cette URL directement. Elle doit renvoyer le JSON attendu, pas une page de connexion, une boucle de redirection ou une réponse HTML générique. Vérifiez le déploiement, pas seulement le fichier ouvert dans l’éditeur.

La sortie actuelle contient Web/site.webmanifest, android-chrome-192x192.png et android-chrome-512x512.png. Le manifeste initial utilise des chemins d’icônes depuis la racine. Si vous placez les images ailleurs, changez les entrées plutôt que de conserver des références vers des fichiers absents.

Une application publiée dans un sous-dossier demande une attention particulière : un chemin commençant par / revient à la racine de l’origine et non au dossier de la page.

Suivez chaque URL d’icône

La référence MDN des icônes de manifeste explique src, sizes, type et purpose. Les chemins relatifs se résolvent depuis l’URL du manifeste ; ceux qui commencent par /, depuis la racine de l’origine.

Ouvrez chaque image et contrôlez sa réponse. Une page d’erreur n’est pas une image même si son URL finit par .png. Un fichier présent localement peut manquer dans le déploiement ou être bloqué par la politique d’images de la page.

Comparez aussi les dimensions déclarées aux pixels réels. Si vous avez redimensionné l’image après génération, mettez à jour l’entrée. Le nom du fichier ne prouve pas qu’il mesure 192 ou 512 pixels.

Déclarez uniquement les usages pris en charge par le dessin

L’export actuel prépare des icônes ordinaires. Il ne crée pas une image maskable distincte et testée. Ajouter purpose: "maskable" à un fichier existant ne modifie pas son dessin ni sa zone sûre.

Si vous avez besoin de ce format, préparez le motif pour son recadrage et vérifiez-le. Conservez une icône ordinaire lorsque c’est approprié. Le guide des tailles permet d’identifier vos sorties, puis la documentation du navigateur précise l’expérience d’installation à viser.

Un manifeste et des icônes vérifiés dans le navigateur

Le 1er octobre 2026, Chrome 154 a ouvert un site local original avec le manifeste et les icônes exportés. Le manifeste a répondu 200 avec application/manifest+json ; les valeurs relatives start_url et scope désignaient la racine du site de test. Les deux icônes ont répondu 200 et leur décodage a confirmé 192 × 192 et 512 × 512 px. Favicon et Apple touch icon ont été vérifiés séparément.

Télécharger le site original de test des icônes PWA

Exécutez cette commande depuis le dossier extrait puis ouvrez http://localhost:8892/. En déplaçant les fichiers dans un sous-dossier, adaptez les URL des icônes relatives à la racine.

python3 -m http.server 8892 --bind localhost

Inspectez le navigateur avant d’effacer les données

Ouvrez les outils d’application ou de manifeste du navigateur. Regardez le manifeste interprété, les aperçus et les erreurs de téléchargement. Contrôlez ensuite les réponses réseau du JSON et des images. Vous distinguerez une URL erronée d’une ancienne réponse mise en cache.

Avec une installation jetable, retirez l’application de test puis réinstallez-la après vérification des nouvelles ressources. Effacer les données du site peut supprimer des informations locales. Préférez les contrôles ciblés avant d’effacer les données d’un utilisateur réel.

Une URL volontairement versionnée facilite le suivi du déploiement et du cache. Mettez à jour le manifeste et notez la version installée. Évitez les URL aléatoires à chaque requête : des ressources stables et versionnées sont plus faciles à diagnostiquer et à mettre en cache.

Vérifiez séparément l’installation

Le guide MDN sur l’installation des PWA décrit les exigences plus larges. Les icônes en font partie, mais leur export ne rend pas un site installable sur tous les systèmes et navigateurs.

Utilisez un site de test contrôlé, le manifeste publié et le navigateur à prendre en charge. Notez si le manifeste a chargé, si les images ont été récupérées et si l’installation utilise le bon dessin. Une vérification sur ordinateur n’est pas une installation sur téléphone.

Une installation réelle dans Safari

Le 2 octobre 2026, ce même site a été ajouté à l’écran d’accueil d’un simulateur iPhone 17 isolé avec Safari sous iOS 26.5. L’option d’ouverture comme app web était activée. My App affichait le motif XY original et ouvrait le site dans une application Web distincte, sans barre d’adresse Safari. Cela vérifie ce parcours local, pas l’installation Chromium, le mode hors ligne ni un appareil physique.

Suivez les instructions Apple pour Safari : ouvrez le site, puis Plus → Partager → Sur l’écran d’accueil. Gardez l’ouverture comme app web activée et touchez Ajouter. Lancez ensuite l’icône et vérifiez le motif et la destination. Le site ne fournit toujours ni service worker ni illustration maskable dédiée.

Questions sur les icônes de manifeste PWA

Pourquoi le favicon a-t-il changé, mais pas l’icône installée ?

Vérifiez les déclarations distinctes, puis le cache de l’installation existante. Le favicon peut être correct alors que le manifeste référence encore une autre image.

Suffit-il de renommer le fichier ?

Vous pouvez aligner les noms, mais contrôlez également le format et les dimensions. Renommer ne convertit ni ne redimensionne les octets.

Tous les navigateurs doivent-ils afficher le même résultat ?

Non. Les interfaces d’installation et usages d’icônes varient. Testez le navigateur et l’appareil prévus.

Terminez avec un contrôle reproductible

Confirmez le manifeste, suivez ses références et inspectez les fichiers avant une nouvelle installation de test. Pour préparer des ressources de remplacement, revenez au générateur PWA.