Dans la conception de sites Web, comme vous le savez probablement, chaque détail compte. Une personne qui est passée à votre ressource ne voit pas chacun des éléments séparément, mais perçoit l'image entière comme un ensemble composé d'autres petits détails. Ainsi, si vous manquez quelque chose dans le processus de développement de votre ressource, ce détail peut ensuite gâcher tout le complexe, toute la composition.
Une telle bagatelle peut être, par exemple, l'arrière-plan d'un bouton, une police mal choisie d'un petit élément, et même un favicon. En effet, voyez par vous-même - les grands sites bien connus ont une icône individuelle qui l'indique dans la section "Signets" du navigateur de l'utilisateur. Sans cela, les développeurs de la ressource n'auraient pas été en mesure de créer la composition qu'ils recherchaient à l'origine.
Par conséquent, lors de la création d'un design pour votre site, vous devez prendre soin d'un détail tel que le favicon. Dans cet article, nous expliquerons comment l'adapter au style général de la ressource, ainsi que les tailles que cette image devrait avoir.
Icône du site
D'abord, définissons ce qu'est cet élément. En ce moment, jetez un œil au titre de l'onglet de votre navigateur. Comme vous pouvez le voir, il y a une petite image à sa gauche, indiquant une version simplifiée du logo de la ressource. La même image se trouve également près du nom du site affiché dans les résultats de recherche. C'est ce qui guide l'utilisateur lorsqu'il voit le titre.
De nombreux webmasters comprennent qu'une telle image est nécessaire - mais peu de gens savent quelle taille de favicon pour le site sera la plus appropriée. Par conséquent, dans cet article, nous ne donnerons pas seulement des informations sur la façon de créer une telle icône et comment vous pouvez l'installer sur votre ressource, mais nous parlerons également des tailles d'image.
Le but du favicon
Ainsi, l'image près de l'en-tête du site est utilisée pour l'identification. C'est son but initial: exprimer le site dont on voit le nom, et le faire ressortir aux yeux des autres. Cela se fait aussi simplement que possible grâce à l'utilisation de graphiques: nous percevons intuitivement les informations dans les images beaucoup plus rapidement et plus facilement qu'au format texte. Les favicons nous aident à faire exactement cela. Mais n'oubliez pas que la taille du favicon est minime aux yeux de l'utilisateur. Il ne s'agit pas d'un logo dans le "header" du site, qui peut contenir des informations supplémentaires sous forme d'inscriptions, quelques précisions ou des informations de contact. Tout ce qui peut être affiché dans l'icône à côté du nom doit correspondre autant que possible à la taille du favicon. Et lui, comme déjà indiqué, est simplement miniature (seulement 16 par 16 pixels).
Comment choisirfavicon ?
Alors, comment un webmaster peut-il concevoir une icône pour son site ? Il convient de noter que la simple compression du logo du site, le plus souvent, ne fonctionnera pas. Sur les emblèmes qui se présentent sous la forme d'un logo d'une ressource particulière, divers éléments sont souvent visibles, qui ne seront pas toujours correctement affichés sous une forme miniature. Il vaut mieux abandonner immédiatement une telle entreprise.
Bien sûr, la taille du favicon ne permet pas de parler simplement d'y insérer une inscription. Tout texte sera simplement invisible à cette résolution. Nous devons développer une nouvelle icône qui véhiculerait le style du site. Pour trouver des solutions, encore une fois, tournons-nous vers les plus gros sites.
Beaucoup de gens utilisent la première lettre stylisée du nom du service comme favicon. C'est ainsi, par exemple, Bing, Yahoo, Yandex, Wikipedia, Google. Il existe une autre approche - si vous avez un nom de site court, vous pouvez le définir comme arrière-plan de votre icône. Pour que la taille du favicon (en pixels il atteint, je le répète, 16 par 16 pixels) affiche correctement cette inscription, elle ne doit pas dépasser 3 lettres. C'est ce que fait, par exemple, le service Aol.
Comment créer un favicon ?
Il existe plusieurs façons de créer une icône pour le nom du site. Bien sûr, le plus simple est de travailler avec différentes solutions toutes faites. Nous pouvons parler de certains services ou programmes qui vous permettent de créer une icône à partir d'une image à part entière en la réduisant. Cependant, je recommanderais de développer un tel logo par vous-même. Cela donnera d'abordl'occasion d'apprendre quelque chose; et deuxièmement, il fournira plus d'outils. Tout ce que vous devez savoir pour cela, c'est ce qu'il faut dessiner, et aussi savoir quelle taille le favicon doit avoir dans la version finale. Nous parlerons de la taille des icônes pour le site un peu plus tard, mais pour l'instant nous noterons quelques subtilités de travail avec de telles images. En particulier, sans mentionner la taille du favicon pour le site, le format d'une telle image mérite d'être précisé. Comme le notent les concepteurs expérimentés, l'image doit être enregistrée au format-p.webp
Vous pouvez enregistrer l'image, par exemple, en utilisant Photoshop, où l'emblème sera dessiné.
Dimensions des favoris
Alors, parlons maintenant de la taille de l'image que nous voyons à côté du nom du site dans les résultats de recherche. Par défaut, comme déjà mentionné, sa taille n'est que de 16 pixels (de chaque côté). Cependant, si vous essayez de modifier cette image dans Photoshop, vous verrez par vous-même à quel point c'est gênant. Par conséquent, nous vous recommandons de travailler avec une image agrandie, qui à l'avenir pourra simplement être compressée le long des bords et enregistrée dans le format requis.
Multiplateforme
Cependant, en parlant de la taille du favicon sur votre site, il y a encore une chose à garder à l'esprit. Toutes les plates-formes n'affichent pas une image de ressource de la même manière. Par exemple, les appareils avec un écran Retina "voient" votre favicon à 32 par 32 pixels. Et dans Safari et sur la nouvelle plate-forme Windows, et pas du tout, ces icônes atteignent une taille de 64pixels.
Par conséquent, nous vous recommandons de sauvegarder différentes versions de l'icône et de prévoir simplement son changement en fonction de la plate-forme de l'utilisateur à l'avenir. Un autre point intéressant - vous pouvez essayer de charger l'icône dans le plus grand format, en comptant sur le fait qu'elle "rétrécira" en fonction du navigateur.
Éditeurs extérieurs
Bien sûr, c'est bien si vous maîtrisez Photoshop et savez quelle taille doit avoir le favicon et comment y parvenir tout en sauvegardant votre image. Cependant, il y a beaucoup de débutants qui n'ont tout simplement pas rencontré les éditeurs graphiques de si près auparavant, ils ne peuvent donc pas dessiner l'image souhaitée aussi facilement. Pour aider ces webmasters, il existe différents services qui permettent de créer automatiquement l'icône qui vous intéresse. Beaucoup d'entre eux sont même gratuits, ce qui ne nécessite aucun investissement de la part de l'utilisateur.
Parfois, il suffit de s'inscrire pour travailler, mais, comme vous le savez, cela se fait une seule fois - après tout, les entreprises ne changent pas leur favicon si souvent. Jetez un œil à Google, qui change de logo tous les jours, mais ne touche pas à l'icône.
Comment installer un favicon ?
En général, configurer votre site de manière à ce qu'il affiche correctement l'image dont vous avez besoin est très simple. Il suffit d'effectuer une série d'étapes simples qui permettront aux moteurs de recherche, ainsi qu'aux simples navigateurs, de lire les informations.
Pour ce faire, l'image résultante doit être enregistrée avecnommé favicon.ico et placé à la racine de votre ressource. Voilà, maintenant votre image sera reconnue automatiquement, et après un certain temps, elle sera liée à votre site.
En plus de cette liaison, vous pouvez ajouter une ligne supplémentaire qui "suggérera" où se trouve votre icône. Il ressemble à ceci:
Installer le code dans l'en-tête du site.
Conclusions
Donc, après avoir lu notre article, vous avez compris la taille d'un favicon pour un site et ce qu'il est. De plus, je pense que vous avez compris que trouver la bonne icône pour votre ressource est une nécessité, car cela joue entre vos mains à la fois en termes d'augmentation de la reconnaissance et en termes de distinction supplémentaire parmi vos concurrents. Au moins les plus grands sites font de même, ce qui peut être pris comme un excellent exemple. Et en plus, cela ne demande pas beaucoup d'efforts - après avoir créé un favicon une fois et l'avoir installé correctement sur votre site, vous pouvez l'oublier pendant les prochains mois.
Par conséquent, n'hésitez pas à expérimenter, à proposer quelque chose de nouveau, à essayer - et tout ira bien !
