Vous avez peut-être remarqué sur certains sites une petite map grise à côté du Title ?
Cela arrive maintenant sur Chrome lorsque votre site n’a pas renseigné de favicon. C’est on ne peut plus dommageable car cette petite image fait partie intégrante de votre identité visuelle.
C’est dans les détails que se cache le diable. Nous dirons plutôt que ce détail a son importance dans la reconnaissance immédiate de votre univers de marque et comme élément de différenciation.
Alors, comment designer de manière optimale le favicon de votre site ?
1. Faites un favicon !
Conseil anodin ? Pas vraiment lorsqu’on remarque le nombre de sites qui ne le personnalise pas.
En UX design, le favicon joue un rôle important d’aiguilleur dans la navigation des internautes entre les différents sites consultés.
Depuis mai 2019, il est même placé devant la balise titre et devient prioritaire dans l’ordre de lecture classique (de gauche à droite).
2. Less is more
À l’image de l’icône d’une application d’application, vous allez devoir faire preuve de minimalisme pour ne garder que l’essentiel ou l’élément distinctif de votre site.
3. Ne reprenez pas votre logo à l’identique
En lien avec le conseil précédent, essayez d’imaginer une version simplifiée de votre logo.
Avec les réseaux sociaux et les profil pictures rondes, de plus en plus de marques se retrouvent déjà dans l’obligation d’élaborer une version simplifiée de leur logo.
4. Adaptez votre nom de marque…
Si votre logo est un nom de marque, cela peut vous faciliter la tâche en reprenant des initiales ou la première lettre de manière stylisée.
Vous pouvez voir l’exemple vidéo de Google :
5. Ou trouvez votre symbole
Si votre logo est une illustration ou une image. Tentez d’abord de le conserver en l’état en réduisant sa taille.
S’il devient illisible, posez-vous les questions suivantes :
- Contient-il un picto ou un élément de représentation symbolique ? Un animal, une main, une étoile ?
- Ou bien puis-je représenter mon activité par un picto (un avion, une assiette, un cœur) ? Cette option est la plus risquée dans la mesure où vous devez vous différencier.
6. Utilisez de la couleur
Le favicon est une image qui peut apparaître selon le navigateur, sur un onglet en fond gris, blanc ou noir.
Pour la faire ressortir, utilisez des couleurs lumineuses.
7. Respectez la taille
Un favicon est un carré de 16 pixels sur pixels.
8. Pensez aux différentes dimensions
En réalité votre favicon doit comporter 13 dimensions pour s’adapter aux différents écrans et OS mobiles.
9. Évitez les carrés
Votre favicon a une dimension carrée certes, mais cela ne doit pas nécessairement vous orienter vers une forme carrée.
Au contraire, pour vous différencier, optez pour une ellipse ou plutôt une forme fidèle à votre lettre ou icône détouré.
10. Exportez sur fond transparent
Pensez à bien exporter le fichier en fond transparent de manière à ne pas voir apparaître un fond blanc carré sur votre onglet.
Comment intégrer le favicon ?
Commencez par héberger votre image puis ajoutez ce code entre les 2 balises <head> </head> de votre fichier HTML :
- Option 1 : synthétique
<link rel=”shortcut icon” type=”image/x-icon” href=”http://votresite.com/favicon.ico“> - Option 2 : détaillée
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff">
Apprenez à intégrer votre favicon sur Shopify et sur WordPress.
Imaginez un internaute avec des dizaines d’onglets ouverts dans son navigateur, comment peut-il reconnaître votre site ?
Si la réponse est évidente alors bravo, vous avez réussi à créer le parfait favicon pour votre site !
Vous trouverez également des experts sur Graphiste.com pour vous guider dans ce projet.
