Couleur du thème et icônes de l’application

La balise <meta name="theme-color" content="#1f2937"> définit la couleur de la barre d’adresse du navigateur sur mobile et celle de la barre de titre sur les PWA de bureau. Elle donne à la page une apparence soignée, semblable à celle d’une application, sans modifier son contenu.

Définissez des couleurs distinctes pour les modes clair et sombre : <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> ainsi qu’une seconde balise avec la couleur sombre. Les navigateurs sélectionnent celle qui correspond aux préférences du système d’exploitation de l’utilisateur.

La propriété theme_color du manifeste définit la couleur lorsque l’application s’exécute comme une PWA installée (barre de titre de la fenêtre autonome). Faites-la correspondre à la balise meta de couleur du thème dans la page afin d’assurer la cohérence : que l’application s’exécute dans le navigateur ou qu’elle soit installée, son identité visuelle reste la même.

<link rel="icon" href="/favicon.ico"> est l’icône intemporelle de l’onglet du navigateur. Malgré son nom, les navigateurs modernes préfèrent le PNG ou le SVG à l’ICO. Fournissez un PNG de 32x32 via <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> pour un rendu plus net.

Les navigateurs modernes acceptent les icônes de favori SVG : <link rel="icon" type="image/svg+xml" href="/icon.svg">. Elles restent nettes à toutes les tailles et produisent un fichier minuscule. Utilisez-les pour les logos vectoriels et associez-leur une solution de secours au format PNG pour les navigateurs qui ne prennent pas en charge les icônes de favori SVG.

L’écran d’accueil d’iOS utilise l’icône tactile Apple : <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Fournissez un PNG de 180x180. iOS ne lit pas les icônes du manifeste web pour l’installation sur l’écran d’accueil ; le lien vers l’icône tactile Apple est indispensable.

Les installations Android lisent les icônes dans le tableau d’icônes du manifeste. Incluez des PNG de 192x192 (écran d’accueil) et de 512x512 (écran de démarrage, tiroir d’applications). Ajoutez une copie marquée « maskable » afin qu’Android puisse adapter l’icône à la forme de l’icône de l’écran d’accueil (cercle, carré arrondi ou carré).

Les icônes masquables doivent contenir leur contenu essentiel dans une zone sûre centrale couvrant 80 % de l’icône ; les 20 % extérieurs peuvent être rognés selon la forme du masque de l’appareil. Utilisez des outils comme maskable.app pour prévisualiser l’icône avec différentes formes de masque pendant la conception.

Pour une vignette épinglée sous Windows 8/10 : <meta name="msapplication-TileImage" content="/tile.png"> et <meta name="msapplication-TileColor" content="#1f2937">. Leur priorité est désormais inférieure à celle des solutions destinées aux autres plateformes, mais elles restent appréciées des utilisateurs de Windows qui épinglent des sites.

Pour les anciennes versions d’IE et d’Edge : <meta name="msapplication-config" content="/browserconfig.xml"> pointe vers un fichier XML contenant des icônes de vignette de différentes tailles. Ce fichier est largement inutile aujourd’hui ; les nouveaux sites peuvent ignorer browserconfig.xml sans conséquence.

Pour un onglet épinglé dans Safari sous macOS : <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. Le SVG doit être une icône monochrome (sa couleur est remplacée par l’attribut de couleur). Cette fonctionnalité est utilisée uniquement pour les onglets épinglés de Safari sous macOS.

Utilisez realfavicongenerator.net pour générer toutes les variantes d’icônes à partir d’une seule source. Vérifiez le résultat sur un véritable appareil iOS (ajout à l’écran d’accueil) et sur Android (installation de l’application depuis le menu du navigateur) afin de confirmer que les icônes sont correctement rognées et ne sont pas pixellisées.

La couleur du thème (avec ses variantes selon les requêtes de média) teinte la barre d’adresse ; la propriété theme_color du manifeste teinte la barre de titre de l’application installée. Les icônes comprennent les icônes de favori (SVG + PNG), l’icône tactile Apple (iOS, 180x180), les icônes du manifeste (Android, 192 + 512 + maskable), l’icône de masque de Safari (SVG monochrome) et TileImage de msapplication (vignettes Windows épinglées). Utilisez realfavicongenerator.net pour générer toutes les variantes à partir d’une seule source.