Guide complet de spécification de configuration pour favicon de site frontend

Un fichier ICO standard prend en charge l'intégration de plusieurs bitmaps de tailles différentes dans un seul conteneur, et la configuration courante inclut trois tailles : 16×16, 32×32 et 48×48. Différents scénarios d'utilisation correspondent automatiquement à la taille adaptée : 16×16 est utilisé pour les barres d'onglets de navigateur, 32×32 pour les barres de signets, et 48×48 pour les raccourcis du bureau.

Le stockage multi-taille des fichiers ICO suit la spécification du format ICO, chaque taille correspond à un bloc de données bitmap indépendant, et le navigateur lit le bitmap de la taille correspondante selon le scénario de rendu actuel, il n'est donc pas nécessaire de générer plusieurs fichiers indépendants. Les anciens navigateurs IE prennent uniquement en charge la lecture des favicons au format ICO, donc garder favicon.ico dans le répertoire racine permet d'assurer la compatibilité avec les accès depuis les versions anciennes.

Les navigateurs modernes tels que Chrome, Firefox et Edge prennent tous en charge les favicons au format PNG. La méthode de déclaration utilise la balise link pour ajouter l'attribut de taille correspondant, et la configuration principale nécessite deux spécifications : 32×32 et 192×192. 32×32 correspond au rendu de barre d'onglets haute résolution dans les navigateurs modernes, et 192×192 est utilisé pour les icônes d'application PWA natives sur Android.

Le code de déclaration standard est <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> et <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">. Les navigateurs sélectionneront automatiquement la taille correspondante à charger selon le scénario.

Certains navigateurs modernes prennent en charge les favicons au format SVG. SVG permet de réaliser une adaptation de couleur sous différents thèmes grâce à des requêtes média intégrées pour s'adapter au changement de mode sombre du système. Le principe de l'adaptation SVG est d'ajouter une requête média pour prefers-color-scheme dans le code SVG, et de définir respectivement la couleur de remplissage de l'icône en mode clair et en mode sombre.

Pour déclarer un favicon SVG, utilisez type="image/svg+xml" pour spécifier le format de fichier. Il a une priorité plus élevée que les formats ICO et PNG traditionnels, et les navigateurs chargent d'abord le format SVG. Les développeurs peuvent utiliser un convertisseur SVG vers ICO pour convertir le SVG adapté édité au format ICO afin d'être compatible avec plus de scénarios d'accès.

Apple iOS propose une icône dédiée pour les pages web ajoutées à l'écran d'accueil, c'est l'apple-touch-icon. La spécification actuelle requiert une icône PNG de 180×180. Les versions anciennes prenaient en charge les déclarations de plusieurs tailles différentes, et depuis iOS 12, la version donne la priorité à la taille 180×180 pour s'adapter à tous les appareils Apple.

Le code de déclaration standard est <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">. Il n'est pas nécessaire d'ajouter l'attribut size, et le système iOS reconnaîtra automatiquement la taille 180×180 pour l'adaptation. Les coins arrondis et les effets de surbrillance sont traités automatiquement par le système iOS, et les développeurs n'ont pas besoin de prétraiter les coins arrondis.

Les applications PWA doivent configurer le fichier manifest.json pour déclarer les informations de base de l'application, qui doit inclure un champ icon avec la taille correspondante, en déclarant une icône d'application 512×512 pour répondre aux exigences d'installation de PWA. theme-color doit être déclaré à la fois dans la balise meta et dans le manifest, et est utilisé pour la correspondance de la couleur de thème de la barre d'adresse du navigateur.

Pour une configuration complète, ajoutez <meta name="theme-color" content="#ffffff">, et ajoutez un champ de même nom dans manifest.json, en gardant la valeur cohérente avec celle de la balise meta, pour s'adapter à la logique de rendu de la barre d'adresse des différents navigateurs.