Pourquoi votre site a besoin d'un favicon
Un favicon est la petite icone qui apparait dans l'onglet du navigateur, les favoris, certains apercus de recherche et parfois sur l'ecran d'accueil d'un telephone. Il est petit, mais il aide les visiteurs a reconnaitre votre site rapidement.
La methode la plus simple consiste a partir d'une image propre et a utiliser un generateur Favicon. L'outil transforme une image source en tailles d'icones courantes pour le web.
Commencer avec la bonne image
Utilisez une image carree si possible. Un symbole, une marque de logo, une lettre ou une icone simple fonctionne mieux qu'un logo long et detaille. A 16×16 ou 32×32 pixels, les petits details disparaissent vite.
Avant de generer le favicon, verifiez que :
- le dessin reste lisible en petit ;
- le contraste est suffisant ;
- l'icone ne depend pas de petits mots ;
- la forme principale est centree ;
- l'image n'est pas floue avant redimensionnement.
Si l'image doit etre recadree ou nettoyee, preparez-la avec l'editeur d'image, puis utilisez la version carree finale.
Generer les tailles standard
Ouvrez le generateur Favicon, importez l'image et creez le paquet d'icones. Un bon ensemble contient plusieurs tailles, car les navigateurs et appareils n'utilisent pas toujours le meme fichier.
Les petites tailles servent aux onglets. Les grandes tailles sont utiles pour les raccourcis, les ecrans haute resolution et certains usages proches d'une application.
Ajouter le code HTML
Apres generation, copiez le code HTML fourni dans la section head de votre site. Cela indique aux navigateurs quels fichiers utiliser.
Si votre site utilise un modele global, ajoutez le code dans ce modele afin que toutes les pages partagent le meme favicon. Apres publication, actualisez le site. Les navigateurs gardent souvent les favicons en cache, donc testez aussi dans une fenetre privee si besoin.
Erreurs courantes
La premiere erreur est d'utiliser un logo trop large. Il peut etre parfait dans un en-tete, mais illisible comme petite icone. Choisissez une version simplifiee.
La deuxieme erreur est le manque de contraste. Une forme sombre sur fond sombre ou transparent peut disparaitre dans certains themes. Testez l'icone sur fond clair et sombre.
Evitez aussi de changer de favicon trop souvent. Cette icone participe a la memoire visuelle de votre site.
Verification finale
Avant de terminer, assurez-vous que l'icone reste claire en petite taille, que les fichiers sont au bon endroit et que le code HTML est bien ajoute.
Pour aller vite, preparez une image carree, ouvrez le generateur Favicon, genereez les tailles standard et ajoutez le code a votre site.