Exemples, meilleures pratiques et techniques Favicon

Avez-vous déjà fait attention à ces minuscules icônes en haut des onglets du navigateur? Qu'en est-il lorsque vous enregistrez un raccourci vers un site Web ou une page en ligne? Ces minuscules images, ou favicons, sont conçues spécialement à cet effet.

Il y a une différence assez nette entre ce qui fait une bonne ou une mauvaise petite icône. Vous seriez pardonné de penser que les décisions de conception à petite échelle importent moins. Mais un favicon mal conçu peut mal refléter votre marque.

Aujourd'hui, nous examinons ce que sont ces icônes, leurs techniques de conception de base et les spécifications que vous devrez suivre.

Explorez Envato Elements

Qu'est-ce qu'un Favicon?

Simplement, un favicon est une petite icône transparente utilisée pour représenter un site Web, une marque ou une entreprise. Les favicons aident à améliorer l'expérience utilisateur en fournissant un marqueur cohérent qui indique aux visiteurs du site Web qu'ils se trouvent sur le même site lorsqu'ils naviguent grâce à un visuel cohérent.

Le terme favicon vient de «l'icône préférée». Cette terminologie remonte aux jours d'Internet Explorer lorsque les pages marquées d'un signet étaient appelées «Favoris». Le favicon a été adopté pour la première fois par le World Wide Web Consortium (W3C) pour HTML 4.0, vers 2000, et il a commencé à apparaître de manière plus cohérente dans les fenêtres de navigateur l'année suivante.

Utilisez des favicons pour parcourir rapidement les onglets du navigateur, identifier un signet ou rechercher une application ou un raccourci enregistré sur votre téléphone. L'identifiant visuel est ce que la plupart des gens utilisent pour associer ces liens et pages au bouton droit pour y accéder.

Traditionnellement, les favicons utilisaient un format de fichier .ico, mais c'est moins un problème maintenant. Tout type de fichier transparent fonctionnera dans la plupart des cas; .png est souvent le format de choix.

Considérations techniques

À un moment donné, tous les favicons étaient de très petits carrés de 16 pixels. Ce n'est plus le cas avec plus d'écrans de rétine haute définition et d'icônes de raccourci à considérer.

HTML 5 inclut des normes pour les favicons de plusieurs tailles pour toutes sortes d'utilisations, des minuscules icônes de navigateur aux icônes de station d'accueil d'ordinateur en passant par les icônes d'écran d'accueil. Vous n'avez même plus vraiment besoin de ce carré de 16 pixels.

Tailles et utilisation des favicon modernes:

• 32 × 32: standard pour la plupart des navigateurs de bureau (remplace 16 × 16)
• 128 × 128: Chrome Store et petite icône d'écran étoile de Windows 8
• 152 × 152: icône tactile iPad
• 167 × 167: icône tactile iPad Retina
• 180 × 180: icône iPhone Retina
• 192 × 192: recommandation de l'application Web pour les développeurs Google
• 196 × 196: icône de l'écran d'accueil Android

Les meilleures pratiques

Bien qu'il semble qu'une icône qui soit ainsi puisse être insignifiante en termes de conception globale, c'est loin d'être vrai.

Un favicon en dit long sur votre marque et votre site Web. Les utilisateurs en sont venus à s’attendre à ce qu’ils ne puissent pas les identifier par leur nom. Ces petits éléments contribuent à l'expérience utilisateur globale et à la marque.

Alors, comment pouvez-vous tirer le meilleur parti d'un favicon?

Gardez ces meilleures pratiques à l'esprit:

• Un favicon doit se connecter à votre identité de marque, mais il est souvent trop petit pour inclure un logo entier. Utilisez un élément identifiable tel que la première lettre de votre nom de marque ou une petite marque que vous utilisez conjointement avec la marque.
• Pensez à la forme. L'espace pour un favicon, par défaut, est carré. Si vous voulez autre chose, un fond transparent est nécessaire. Certains systèmes peuvent également arrondir les bords, ce qui en fait une autre considération à garder à l'esprit.
• Assurez-vous que le fichier est petit, mais pas trop petit. Téléchargez une taille de favicon qui s'affichera correctement sur la plupart des appareils, mais n'empêchera pas le site Web global.
• Évitez les mots ou les éléments complexes dans la conception du favicon.
• Respectez une palette de couleurs simple et rationalisée pour le favicon. C'est trop petit pour devenir fou avec la couleur. C'est pourquoi la plupart de ces minuscules icônes n'utilisent guère plus qu'une couleur d'arrière-plan et de premier plan avec beaucoup de contraste entre les deux.

Techniques de conception

Étant donné qu'un favicon est petit, vous pourriez être enclin à le concevoir sur un coup de tête dans Photoshop. Ce n'est pas la voie recommandée pour la longévité.

La règle de conception visuelle supérieure pour les favicons est de garder la conception simple. N'exagérez pas avec la couleur, le texte ou les éléments de marque.

Créez votre favicon dans un outil vectoriel tel qu'Illustrator ou Sketch, puis exportez le dessin aux tailles nécessaires. Cela garantira qu'à mesure que les résolutions d'écran changeront, vous aurez un favicon qui résiste à l'épreuve du temps. (Tout ce que vous aurez à faire est de réexporter à une nouvelle taille.)

La règle de conception visuelle supérieure pour les favicons est de garder la conception simple. N'exagérez pas avec la couleur, le texte ou les éléments de marque. En regardant les exemples dans ce post, vous verrez que presque tous ces minuscules éléments sont lisibles à 16 x 16 pixels.

Évitez les astuces telles que l'animation; ils ne font qu'entraver ici.

Considérez cela comme un défi de conception. Il peut être assez difficile de créer quelque chose de si petit qu'il est facile à lire.

Enregistrez le fichier au format png transparent. C'est une bonne habitude qui garantit que vous ne vous retrouverez pas avec des bords ou des bordures bizarres sur le favicon. (Rien ne semble pire qu'un bord blanc dentelé entourant l'icône.)

Utilisez les principes d'une bonne conception. Vous ne savez jamais quand le favicon peut être utilisé pour quelque chose à une taille plus grande et plus visible. L'enregistrement d'un signet de site Web, par exemple, peut utiliser une grande version d'un favicon. Il en va de même pour l'ancrage et même dans les aperçus des résultats des moteurs de recherche.

Même si elle est petite, cette icône représente votre marque. Concevez-le bien.

Une fois que le fichier est prêt, vous pouvez l'ajouter à votre site Web avec seulement quelques lignes de code. (De nombreux thèmes WordPress et constructeurs de sites Web ont déjà un élément favicon inclus, vous n'avez donc même pas à penser à cette étape.)

Après avoir téléchargé le fichier image, insérez le code suivant dans l'en-tête de votre site Web, en notant que «iconpath» et «iconname» font référence à votre élément de fichier spécifique:

• Fichier d'index HTML:
• WordPress:

Exemples

Les exemples ci-dessous incluent des éléments de marque avec des favicons associés. (Assurez-vous de cliquer et de montrer aux designers un peu d'amour sur leurs pages Dribbble.)

Logotype réactif Prodigi.team

Système de logo proposé par Butterscotch

Affichage du logo Favicon

Modèle Favicon

TEC Logo Option 2

Conclusion

Ce que les favicons manquent de taille, ils constituent l'expérience utilisateur. Ces icônes servent d'outils de navigation aux visiteurs de votre site et à ceux qui ont tendance à laisser trop d'onglets de navigateur ouverts.

En règle générale, un favicon est un identifiant visuel rapide qui relie l'utilisateur à votre présence numérique. Soyez prudent avec lui pour vous assurer qu'il s'agit de la meilleure représentation, plus précise de votre marque.