Vous avez déjà prêté attention à ces minuscules icônes en haut des onglets du navigateur ? Et quand vous enregistrez un raccourci vers un site 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 minuscule icône. Vous seriez pardonné de penser que les décisions de conception à l’échelle minuscule ont moins d’importance. Mais un favicon mal conçu peut refléter mal votre marque.

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

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 permettent d’améliorer l’expérience utilisateur en fournissant un marqueur cohérent qui indique aux visiteurs d’un site web qu’ils sont sur le même site lors de leur navigation grâce à un visuel cohérent.

Le terme favicon vient de « icône favorite ». Cette terminologie date de l’époque d’Internet Explorer où 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 du navigateur l’année suivante.

Utilisez les favicons pour basculer rapidement entre les onglets du navigateur, identifier un signet ou trouver 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 ces pages avec le bon bouton 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 ; le .png est souvent le format de choix.

Considérations techniques

À une époque, tous les favicons étaient de super petits carrés de 16 pixels. Ce n’est plus le cas avec plus d’écrans rétina haute définition et d’icônes de raccourci à prendre en compte.

HTML 5 inclut des normes pour les favicons avec des tailles multiples 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 favicons modernes :

• 32×32 : Standard pour la plupart des navigateurs de bureau (remplace 16×16)
• 128×128 : Chrome store et petite icône d’écran d’étoile de Windows 8
• 152×152 : Icône tactile de l’iPad
• 167×167 : icône tactile Retina de l’iPad
• 180×180 : icône Retina de l’iPhone
• 192×192 : recommandation d’application web Google Developer
• 196×196 : Icône de l’écran d’accueil d’Android

Best Practices

Bien qu’il semble qu’une icône qui est si pourrait ê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 s’y attendent s’ils ne peuvent pas les identifier par leur nom. Ces petits éléments contribuent à l’expérience utilisateur globale et à la marque.

Alors, comment tirer le meilleur parti d’un favicon ?

Gardez ces bonnes pratiques à l’esprit :

• Un favicon doit se connecter à l’identité de votre marque, mais il est souvent trop petit pour inclure un logo entier. Utilisez un élément identifiable tel que la première lettre du nom de votre marque ou une marque minuscule que vous utilisez en conjonction avec la marque.
• Pensez à la forme. L’espace pour une 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.
• Veuillez vous assurer 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 qui n’alourdira pas l’ensemble du site Web.
• Évitez les mots ou les éléments complexes dans la conception du favicon.
• S’en tenir à 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

Puisqu’une favicon est petite, vous pourriez être enclin à la concevoir sur un coup de tête dans Photoshop. Ce n’est pas la voie recommandée pour la longévité.

Construisez votre favicon dans un outil vectoriel tel qu’Illustrator ou Sketch, puis exportez le design aux tailles nécessaires. Ainsi, lorsque les résolutions d’écran changeront, vous disposerez d’une favicon qui résistera à l’épreuve du temps. (Il vous suffira de ré-exporter à une nouvelle taille.)

La principale règle de conception visuelle pour les favicons est de garder un design simple. Ne pas aller trop loin avec la couleur ou le texte ou les éléments de la marque. En regardant les exemples de ce post, vous verrez que presque tous ces minuscules éléments sont lisibles à 16 par 16 pixels.

Évitez les astuces telles que l’animation ; elles ne font que vous gêner 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 en png transparent. C’est une bonne habitude qui garantit que vous ne vous retrouverez pas avec des bords ou des frontières bizarres sur le favicon. (Rien n’est pire qu’un bord blanc déchiqueté entourant l’icône.)

Utilisez les principes d’un bon design. Vous ne savez jamais quand la favicon pourrait être utilisée 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’une favicon. Il en va de même pour l’ancrage et même dans les aperçus de résultats de moteurs de recherche.

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

Une fois que vous avez le fichier 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, de sorte que vous n’avez 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:

Examples

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

Prodigi.team Responsive Logotype

Butterscotch Système de logo proposé

Logo Favicon Display

.

Modèle de favicône

LogoTEC Option 2

Conclusion

Ce que les favicônes manquent en taille, ils le compensent par l’expérience utilisateur. Ces icônes servent d’outils de navigation pour les 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. Soignez-la pour qu’elle soit la meilleure représentation, la plus précise, de votre marque.