Le favicon est la petite icône qui apparaît dans un onglet de navigateur, une liste de favoris et dans les suggestions de la barre d'adresse lorsqu'une personne visite un site Web. Bien le faire implique plus que simplement rendre une image petite. Un favicon qui semble net nécessite les bonnes dimensions en pixels, un design propre et centré, et le format correct pour le contexte dans lequel il est utilisé. La taille standard de favicon est de 16x16 pixels pour l'affichage de base dans l'onglet du navigateur, avec 32x32 utilisé pour les écrans haute densité et 48x48 inclus dans les packages complets de favicon. Un favicon mal préparé semble flou ou indistinct dans l'onglet, ce qui est un petit détail qui reflète la qualité globale d'un site Web.
Comment redimensionner une image pour Favicon
Pour le favicon de base, entrez 16 dans les champs de largeur et de hauteur et décochez la case Conserver le rapport d'aspect pour une sortie carrée forcée. Pour une version haute résolution, répétez le processus avec 32 dans les deux champs. Pour un package complet de favicon, traitez la même image en 16x16, 32x32 et 48x48 séparément.
La qualité de l'image source est plus importante pour les tailles de favicon que pour presque toute autre dimension. Un logo complexe ou une illustration détaillée perd toute forme reconnaissable en 16x16. Une icône simple et audacieuse avec des bords nets et des détails minimes résiste beaucoup mieux. Commencez par la version la plus grande disponible de l'icône et réduisez-la pour obtenir le résultat le plus net à chaque taille. Téléchargez plusieurs tailles à la fois et téléchargez en ZIP une fois terminé.
Tailles standard de Favicon
16x16 pixels : la taille de base affichée dans les onglets du navigateur sur les écrans à résolution standard. 32x32 pixels : utilisé par les écrans haute densité et les raccourcis du bureau Windows. 48x48 pixels : inclus dans les packages complets de favicon pour une compatibilité plus large. 180x180 pixels : la taille de l'Apple Touch Icon utilisée lorsqu'un site Web est enregistré sur l'écran d'accueil iOS. 192x192 pixels : utilisé par les appareils Android pour les icônes d'applications Web sur l'écran d'accueil. Un package complet de favicon inclut généralement toutes ces tailles générées à partir de la même icône source.
Format de sortie pour les Favicons
PNG est le format le plus largement pris en charge pour les implémentations modernes de favicon. La plupart des navigateurs acceptent les fichiers favicon PNG directement via la balise link dans l'en-tête HTML. Les arrière-plans transparents sont pris en charge dans PNG et permettent au favicon de reposer proprement sur la couleur de l'onglet du navigateur. Le format ICO traditionnel regroupe plusieurs tailles dans un seul fichier et est encore utilisé pour le fichier favicon.ico racine que les navigateurs recherchent par défaut. PNG à la bonne taille est l'approche la plus directe pour la plupart des projets Web modernes.