Pourquoi et comment créer une favicon ?
La favicon est une image (icone) qui symbolise un site internet. Elle est affichée dans les barres d’Url, les signets, les onglets des pages consultées, etc, selon le navigateur web utilisé. Elle permet donc à vos internautes d’identifier rapidement votre site au milieu de son historique ou parmi ses 10 onglets ouverts.
Même si une favicon n’a pas d’impact direct sur le référencement, il offre une meilleure visibilité de votre marque et fait partie des points à ne pas négliger lors de la mise en ligne d’un site.
Pour que les favicons soient correctement interprétées par les principaux navigateurs web il est préférable d’utiliser le format .ico (format propriétaires de Windows pour les icones). Néanmoins les navigateur modernes acceptent d’autres formats comme le .png.
Comment créer votre favicon ?
- Vous devez d’abord créer votre image dans un format carré de 16x16px ou 32x32px
- Convertir votre image au format .ico. Mais attention… la plupart des logiciels de gestion d’images ne prennent pas en charge ce format… Nous allons voir comment convertir simplement une image en un fichier .ico.
Comment convertir une image JPG, PNG ou GIF en .ico ?
Utiliser un convertisseur en ligne
Une solution simple et rapide à mettre en œuvre : utiliser un outil de conversion en ligne tel que cloudconvert.com.
Le service vous propose de télécharger votre image à partir de votre disque dur, d’une URL ou d’un cloud (Dropbox, Google Drive, etc.).
Vous sélectionnez ensuite le format de destination (dans notre cas .ico, mais le service fonctionne également pour beaucoup d’autres formats), puis vous lancez le transfert.
Utiliser un logiciel de traitement d’image
Certains logiciels gèrent le format .ico, c’est le cas par exemple de Gimp (gratuit et disponible sur windows, Linux, et OS X).
Utiliser Photoshop avec le plugin ICOFormat
Si vous utilisez Photoshop, vous pouvez ajouter le plugin ICOFormat pour que Photoshop prenne en compte ce type de fichier.
Ajouter la favicon à votre site
Pour ajouter la favicon .ico à votre site il suffit ensuite de placer le code suivant dans l’entête de votre site, entre les balise <head> et </head>
[pastacode lang= »markup » manual= »%3Clink%20rel%3D%22shortcut%20icon%22%20href%3D%22votre-favicon.ico%22%2F%3E » message= »Ajouter une favicon .ico » highlight= » » provider= »manual »/]Si vous utilisez un autre format, veillez à spécifier le MIME, comme ici pour un png :
[pastacode lang= »markup » manual= »%3Clink%20rel%3D%22icon%22%20type%3D%22image%2Fpng%22%20href%3D%22votre-favicon.png%22%20%2F%3E » message= »Ajouter une favicon .png » highlight= » » provider= »manual »/]Si cet article vous a aidé, si vous avez des questions ou des améliorations à proposer, n'hésitez pas à me laisser un commentaire en bas de page !
