Comment mettre le logo d'un site sur l'onglet des navigateurs en HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-06-04 14:05:25
Thèmes : webmaster - html - logo - favicon
Question

En HTML, comment mettre le logo d'un site internet sur l'onglet des navigateurs ?

Réponse

L'icône en forme de logo, qui s'affiche en regard du titre d'une page Web est appelée favicon.

Un favicon est une petite icône incluse avec un site Web, qui s'affiche à des endroits comme la barre d'adresse du navigateur, les onglets de page et le menu des signets.

Remarque : Notez cependant que la plupart des navigateurs modernes ont remplacé le favicon de la barre d'adresse par une image indiquant si le site Web utilise ou non HTTPS.

Habituellement, un favicon mesure 16 x 16 pixels et est au format GIF, PNG ou ICO.

Pour mettre le logo d'un site sur l'onglet des navigateurs, et ainsi ajouter un favicon à votre site Web, en HTML, vous devez utiliser la balise <link> et spécifier son format via l'attribut type, et sa taille via l'attribut size.

Le code suivant doit être placé entre les balises <head> et </head>.

<link rel="icon" type="image/png" sizes="16x16" href="https://www.collaborativejob.com/images/favicon/favicon-16x16.png">

Remarque : L'attribut rel peut prendre la valeur apple-touch-icon dans la cadre d'une icône amenée à être affichée sur le bureau d'un écran tactile d'un iPhone ou iPad, en tant que raccourci. Référez-vous à cette page du site d'Apple pour plus d'informations.