Mettre un favicon en HTML : comment procéder ?

Vous avez le choix entre deux possibilités pour ajouter un favicon avec HTML. La solution la plus appropriée consiste à utiliser la marque figurative, c’est-à dire un symbole graphique représentant la marque ou l’entreprise, et à l’ajouter en élément HTML. La création d’un favicon peut être simplifiée par l’utilisation d’un générateur.

Un favicon (combinaison des termes anglais « favorite » et « icon ») est le petit graphique visuel apparaissant dans l’onglet des sites Web ouverts sur un navigateur. Par exemple, l’onglet de cet article présente un favicon bleu avec la lettre « I » (pour IONOS) en blanc sur un fond bleu. Ainsi, le site Web est facilement reconnaissable dans les onglets. On retrouve également les favicons dans la barre d’outils, dans les marque-pages des favoris, dans la liste des applications ou dans les résultats de recherche. Vous trouverez tout ce qu’il faut savoir sur ces icônes dans notre article « Qu’est-ce qu’un favicon ? ».

Avant de pouvoir ajouter un favicon avec HTML, il vous faudra d’abord passer par l’étape de création. L’article évoqué ci-dessus vous apporte de précieux conseils et astuces à ce sujet. En résumé, vous devez veiller à ce que l’image fonctionne en basse comme en haute résolution et qu’elle puisse être directement associée à votre marque et son image. Pour que le favicon soit compatible avec la plupart des navigateurs, nous vous conseillons la résolution 16 x 16 ou 32 x 32 pixels. De plus, l’image devrait si possible être enregistrée dans les formats .ico, .gif ou .png. Le moyen le plus simple de créer une favicon est d’utiliser un générateur de favicon pour HTML.

La manière la plus sûre d’ajouter votre favicon à votre site Web est de le mettre en HTML. Nous vous expliquons ici étape par étape comment intégrer une icône dans votre site Web en HTML. Pour cela, la première étape consiste à charger l’icône dans le répertoire principal de votre domaine.

Étape 1 : créez d’abord une icône au bon format. La taille du favicon doit être adaptée aux navigateurs ou aux terminaux. Préférez des couleurs contrastées et veillez à ce que l’image fonctionne également en basse résolution.

Étape 2 : téléchargez l’icône dans le répertoire principal de votre domaine.

Étape 3 : accédez maintenant à l’en-tête de votre site Web et saisissez la ligne de code suivante :

Cette méthode ne fonctionne qu’avec le format .ico. Pour les favicons intégrés au format .png, voici le code correspondant :

Si vous avez créé votre favicon pour HTML au format .gif, utilisez ce code :

Il existe une autre méthode beaucoup plus simple pour ajouter un favicon en HTML à un site Web avec du HTML, et ce sans avoir besoin d’écrire de code. Pour cela, il vous faudra tout simplement créer le fichier et le nommer. Une fois que la marque figurative est créée au bon format, enregistrez-la sous le nom favicon.ico et placez-la ensuite dans le répertoire principal de votre domaine. Cette méthode nécessite cependant que le nom du fichier soit correct et entièrement en minuscules.

De plus, deux inconvénients viennent s’ajouter : premièrement, l’intégration de favicons sans code n’est pas reconnue par tous les navigateurs ; deuxièmement, cette méthode implique que tous les sous-domaines créés sous le domaine principal soient affichés avec cette même icône. C’est pour ces raisons que nous ne conseillons pas cette méthode. Ajouter un favicon en HTML avec une ligne de code reste nettement plus sûre.

Ajouter un favicon apporte de nombreux avantages : votre site Web présente un design plus professionnel et soigné, et est trouvé plus rapidement. Ces points positifs valent d’autant plus pour l’optimisation des terminaux mobiles tels que les smartphones ou les tablettes. En effet, les appareils mobiles ont besoin d’un favicon pour enregistrer un site Web sur l’écran d’accueil. Pour cela, le fichier image enregistré comme favicon est utilisé pour l’icône tactile. Comme il existe des différences entre les différents fournisseurs, pensez à créer plusieurs formats lorsque vous intégrez votre favicon en HTML :

• Un fichier .ico, notamment pour les anciens navigateurs. Le nom du fichier est dans ce cas favicon.ico.
• Un fichier .png pour les navigateurs plus récents. Celui-ci s’appelle favicon.png.
• Une image de résolution 128 x 128 pixels pour être utilisée en tant qu’Apple Touch Icon pour Android Chrome et iOS Safari.

Le moyen le plus simple de créer tous ces fichiers est d’utiliser un programme comme le générateur de favicons de IONOS.