C'est ki c'est koi : favicon ?

Comment se fait-il qu’en 2017 on voit encore des sites très bien conçus qui portent le favicon du template ou pire, du CMS ?
Mais avant tout : c’est ki c’est koi le favicon ? La correctrice que je suis vous dira d’abord :

« On dit UNE favicon, pas un favicon ! »

Si vous n’avez que 20 secondes à accorder à la lecture de cet article, voici la définition donnée par notre pote communautaire Wikipédia :

« Une favicon \fa.vi.kon\ est une icône informatique symbolisant un site web. Ces icônes sont créées et/ou utilisés par les concepteurs des sites internet. Les navigateurs web peuvent utiliser la favicon dans la barre d'adresse, les signets, les onglets ou encore les autres raccourcis. »

Si cela vous parle, vous pouvez vaquer à vos occupations ou bien lire mes autres articles. Sinon, entrons un peu dans le décodage de la définition !

Fav-icon : c’est l’icône favorite !
Vous voyez ces petits dessins en haut des onglets des pages Internet ? Et bien c’est ça, la favicon. Elle sert à se repérer quand, comme moi, on a plein de pages ouvertes en même temps sur son navigateur.

Liz à la Ligne, illustration pour l'article : plusieurs favicons sur le navigateur.
Tout de suite, ça vous parle mieux, non ? ;-))

Elle reprend généralement les couleurs de votre site ou de votre logo, une typo archi-claire ou une icône sympa et très schématisée.
Bref, la favicon doit être un mini-raccourci de votre image… Et on insiste sur « mini », car elle est vraiment minuscule ! Pensez alors, pour choisir votre favicon, que ce qui se verra le plus, en fin de compte, ce seront les couleurs.

Liz à la Ligne, illustration pour l'article : comparaison image/favicon

Exit le gris clair et le tout blanc, car souvent utilisé par votre navigateur comme paramètre de base… Et gris sur gris ou blanc sur gris clair, et bien, c’est comme poser un nuage sur un paysage enneigé si vous êtes peintre, on va dire que ce n’est pas la meilleure idée que vous aurez eu en matière de contrastes !

Mais ne pensez pas que vous êtes ignare en matière de favicon ! Car figurez-vous que j’ai connu des graphistes, non intégrateurs, certes, mais webdesigners quand même, qui me donnaient une image large comme une affiche de cinéma qu’ils avaient nommée « favicon.jpg » ou « favicon.png » et qui me disaient : « Tiens, je t’ai fait le favicon pour ton client. » Mais non les gars les filles, cela ne fonctionne pas de cette manière !

La favicon, c’est un fichier .ico créé à partir d’un fichier image. Et pour faire simple, on ne va pas faire soi-même une grande recette de cuisine du web pour transformer l’image qu’on veut en favicon. On va plutôt chercher un générateur de favicon en ligne et en 2 coups de baguette magique, l’image est transformée en favicon avec le code qui va bien, puis on la glisse dans le site. Et au passage, on remercie les personnes cachées derrière ces générateurs souvent gratuits qui nous mettent leur outil à disposition !

Bonus track : rien à voir avec la favicon, mais c'est cadeau : la vidéo que j'ai adoré voir avant de relire l’article. Enjoy !

© Liz à la Ligne-2017
Images : © Freepik & Liz à la Ligne