Les tailles de favicon que les navigateurs et appareils attendent vraiment

Un favicon signifiait autrefois une seule petite image de 16×16. Aujourd'hui, un onglet de navigateur, un raccourci sur l'écran d'accueil d'un téléphone, une barre de favoris et une icône tactile Apple attendent chacun leur propre taille, et n'en fournir qu'une laisse certains de ces contextes flous ou affichant une icône générique de secours à la place de la vôtre.

Pourquoi une seule taille ne suffit pas

Une icône de 16×16 agrandie pour remplir un emplacement d'icône d'écran d'accueil de 180×180 paraît exactement aussi pixelisée que n'importe quelle petite image étirée en grand — impossible d'ajouter du détail absent de la source. Chaque contexte où apparaît un favicon a sa propre résolution attendue, et la pratique moderne consiste à fournir un ensemble de tailles plutôt que de compter sur un navigateur pour agrandir maladroitement un seul petit fichier.

Les tailles à couvrir

• 16×16 et 32×32 — les tailles classiques de favicon, utilisées dans les onglets de navigateur et les listes de favoris sur la plupart des navigateurs de bureau.
• 180×180 — la taille attendue par Apple pour l'icône d'écran d'accueil lorsqu'une page est ajoutée à l'écran d'accueil d'un iPhone ou d'un iPad.
• 192×192 et 512×512 — utilisées par Android et par les manifestes d'applications web pour les icônes d'écran d'accueil et les écrans de démarrage des applications web installables.

Garder le design lisible à 16px

Générateur de favicon prend une image source et produit d'un coup l'ensemble complet des tailles standard, entièrement dans votre navigateur — mais aucun générateur ne peut réparer un design qui ne fonctionne pas à petite taille au départ. Les détails fins, les lignes minces et le petit texte disparaissent complètement à 16×16 ; une forme ou une lettre simple et épaisse qui reste reconnaissable une fois réduite est ce qui se lit vraiment clairement dans un onglet de navigateur, quel que soit le nombre de tailles générées à partir d'elle.