L'importance des favicons pour les sites Web va bien au-delà de la simple conception et de la tendance web design. Entre autres choses, les petites icônes servent également d'orientation et ont un effet positif sur le référencement.
Qu'est-ce qu'un favicon : définition
Un petit symbole avec un grand effet : Un favicon est une petite icône qui s'affiche, par exemple, sur le côté gauche de l'onglet du navigateur et vous permet de garder une vue d'ensemble même si de nombreux sites Web sont ouverts. Il affiche généralement un logo simplifié ou une image : à travers lui, vous pouvez facilement identifier le site Web correspondant. Le favicon a donc une signification particulière : il sert d'orientation et renforce la présence d'un site web.
Le favicon qui convient le mieux ou ce que vous pouvez utiliser pour en créer un dépend exactement de l'apparence de votre marque. Étant donné que le symbole lui-même ne mesure que quelques pixels, les logos sophistiqués et détaillés ne peuvent souvent pas être affichés de manière satisfaisante. Dans ce cas, une variante simplifiée du symbole d'identification réel est recommandée.
La grande importance du favicon peut déjà être devinée à partir du nom : c'est un mot composé, créé en combinant les termes "favori" et "icône", qui signifie "icône préférée". Les petites images apparaissent non seulement dans les onglets du navigateur, mais également dans les signets, où vos sites Web préférés sont enregistrés. De plus, les favicons peuvent désormais également être trouvés sous forme d'icônes d'application, dans les menus de recherche ou dans l'historique de votre navigateur .
Quelle est l'importance des favicons ?
La grande importance du bon favicon pour votre site web peut s'expliquer par plusieurs raisons :
- Professionnalisme : le favicon fait partie intégrante d'un site web professionnel. Renforcez la confiance des visiteurs dans votre marque et montrez que même les plus petits détails comptent pour vous. Bien que la plupart des gens ne puissent pas dire exactement ce qu'est un favicon, ils remarqueraient immédiatement son absence.
- Identification : le favicon est aussi particulièrement important pour des raisons pratiques. Les utilisateurs trouveront votre site Web beaucoup plus rapidement grâce à la petite icône, même si plusieurs onglets sont ouverts en même temps. L'icône rend également votre marque indubitable dans les moteurs de recherche ou les listes d'applications.
- Renforcer votre image de marque : Un bon logo garantit que votre marque est reconnue et peut jouer un rôle dans le processus de décision d'achat. Aussi critique que soit la conception de logo pour votre startup ou votre marque, le bon favicon est également important.
Comment les favicons affectent-ils le référencement ?
Au moins indirectement, le favicon a également une importance pour l'optimisation des moteurs de recherche . Bien qu'il n'affecte pas directement les classements, un bon favicon a toujours un effet positif sur le référencement. Les raisons sont les suivantes:
- Fonction signet : surtout sur Chrome, le favicon fait office de signet. Les sites Web qui tirent parti de cette fonctionnalité sont beaucoup mieux identifiés et peuvent se classer en bonne place. Dans de nombreux cas, cela augmente considérablement le trafic.
- Facilité d'utilisation : La convivialité d'un site Web a un impact direct sur son succès. Les utilisateurs récompensent les pages qui suivent un concept rigoureux, sont visuellement attrayantes et peuvent être parcourues de manière intuitive. Les favicons contribuent à cet objectif. Les visiteurs restent plus longtemps et plus souvent sur des sites Web bien conçus, ce qui est à son tour récompensé par les moteurs de recherche dans le classement.
- Visibilité : Une visibilité accrue grâce à une icône appropriée est également récompensée par un meilleur positionnement à long terme. Les utilisateurs sont plus susceptibles d'ouvrir un site Web avec une icône accrocheuse, d'autant plus qu'elle apparaît également dans les résultats de recherche.
À quoi faire attention lors de la création d'un favicon ?
Il n'est pas possible de décrire les caractéristiques d'un bon favicon en général. En effet, l'approche appropriée dépend en grande partie de la marque et de son design. De nombreuses entreprises utilisent également leur logo comme favicon, mais cela ne fonctionne que s'il reste accrocheur même en miniature et en basse résolution. Cependant, certaines règles de base pour créer un mini-graphique approprié sont les suivantes :
- Identité d'entreprise : les exemples de favicons réussis sont toujours conformes à l'identité d'entreprise d'une entreprise . Même si vous ne pouvez pas utiliser votre propre logo comme symbole, le motif que vous choisissez doit toujours correspondre au reste du design. C'est le seul moyen de préserver l'unicité de la marque.
- "Moins c'est plus" : les favicons sont très petits, de sorte que les décorations et les détails élaborés ne sont pas mis en valeur lorsque l'icône est réellement utilisée, en particulier sur un smartphone. Le résultat semble désordonné et n'est plus attrayant. Une option consiste donc toujours à utiliser les initiales d'une marque. Puisqu'il est rarement possible de signaler le titre entier dans le favicon, il est préférable d'utiliser la lettre initiale ou une icône simple mais significative à la place.
- Les bonnes couleurs : Les couleurs utilisées doivent bien entendu correspondre à votre identité visuelle. Si vous ne les avez pas encore choisis, gardez à l'esprit que les couleurs contrastées sont une bonne idée, car elles attirent plus rapidement le regard. Cependant, gardez toujours à l'esprit que les différents navigateurs affichent les favicons un peu différemment. Par exemple, les petites images peuvent avoir un fond blanc ou gris, ce qui peut modifier un peu l'effet.
Quelle est la taille des favicons ?
Si vous souhaitez intégrer un favicon, vous devez respecter la taille de favicon appropriée . Bien qu'il s'agisse généralement de 16 x 16, 32 x 32 ou 48 x 48 pixels , certains navigateurs s'écartent malheureusement de ces valeurs. Ci-dessous une liste des exceptions :
| Navigateur ou appareil | Dimensions |
|---|---|
| Boutique en ligne Chrome | 128x128 pixels |
| Google TV | 96 x 96 pixels |
| Internet Explorer 9 | 24 x 24 pixels |
| iPad (écran d'accueil) | 72 x 72 pixels |
| iPhone (anciens modèles) et iPad Touch | 57 x 57 pixels |
| iPhone 4 (écran d'accueil) | 114 x 114 pixels |
| Opéra (sélection rapide) | 195 x 195 pixels |
Quels formats sont pris en charge ?
En principe, les favicons peuvent être créés dans différents formats. Cependant, le plus courant est .ico , un conteneur de données d'image qui permet différentes profondeurs de bits et résolutions. Ce format est pris en charge par la plupart des navigateurs. Vous pouvez également utiliser .png, .gif ou .svg. Cependant, ces trois formats ne sont pas compatibles avec tous les navigateurs. Le format .jpg est également utilisable, mais la faible résolution ne le rend pas idéal.
Taille de favicon pour Google
En plus de ces deux tailles de favicon, il existe des formats tout aussi utiles et qu'il convient idéalement d'inclure. Ceci est particulièrement important pour Google, car les résultats de recherche sont affichés via un favicon sur la plateforme, dont la taille doit être de 48 x 48 pixels . Alternativement, vous pouvez choisir une taille qui est un multiple de ces dimensions. Ces mesures sont également importantes pour Android. Le système d'exploitation utilise des favicons de cette taille pour placer des raccourcis sur l'écran d'accueil. Pour les appareils avec une résolution d'écran élevée, la taille de favicon de 192 x 192 pixels peut également être utile .
Taille de favicon pour les appareils Apple
La situation se complique un peu avec le concurrent Apple. Selon l'appareil final, différents formats de favicon sont optimaux. Pour l'iPhone, le format 60 x 60 pixels est utilisé . Cependant, une résolution nettement plus élevée est également possible, à condition qu'elle soit un multiple de cette valeur. Cela permet une visualisation haute résolution optimale et est mis à l'échelle à d'autres fins. Une image de 180 x 180 pixels est donc un bon choix. Les icônes sur iPad, en revanche, s'affichent à 83,5 x 83,5 pixels . Pour les écrans Retina et Super Retina modernes, le format favicon de 167 x 167 pixels est un bon choix.
Exemples de favicons
Pour vous donner une idée de la polyvalence des petites images, nous vous montrons trois exemples de favicons réussis.
- Google n'utilise que sa lettre initiale et s'appuie sinon sur les couleurs. Le design arc-en-ciel est ce qui distingue le moteur de recherche de la plupart des autres favicons.
- LinkedIn adopte une approche différente et démontre que le favicon ne doit pas toujours être la première lettre du nom. Le "in" blanc sur fond bleu se démarque de bien d'autres icônes.LinkedIn utilise la largeur de favicon pour deux lettres en même temps.
- YouTube montre comment un bon favicon peut fonctionner même sans lettres. Le bouton de lecture, qui fait également partie du logo de l'entreprise, est indubitable et se démarque dans tous les navigateurs.