Insérer une icône d'onglet en HTML
-
Utilisez
<link rel="icon">et une image PNG pour ajouter un favicon pour le site Web en HTML -
Utilisez
<link rel="icon">et une image ICO pour ajouter un favicon pour le site Web en HTML
L’icône d’onglet est fondamentalement une petite icône que nous voyons dans l’onglet du navigateur. Il ressemble généralement à une image de très petite taille de la taille minimale en pixels. Il est également connu sous le nom de favicon. Cet article présentera des méthodes pour ajouter une icône d’onglet de navigateur pour un site Web en HTML.
Utilisez <link rel="icon"> et une image PNG pour ajouter un favicon pour le site Web en HTML
Nous pouvons utiliser la balise <link> et l’attribut rel="icon" pour ajouter un favicon de navigateur en HTML. La balise <link> dans le code connecte le document en cours à la ressource externe. C’est la balise qui est généralement utilisée pour créer un lien vers des feuilles de style externes. Il est également appelé élément vide car il ne contient que des attributs. L’attribut rel est également utilisé pour définir la relation entre la ressource courante et une ressource liée. Nous pouvons définir la destination du lien de l’image à utiliser comme favicon dans l’attribut href. Une image avec l’extension .png doit être utilisée dans l’attribut href.
Au début, vous devez avoir l’image PNG que vous utiliserez comme favicon sur votre appareil. Il doit être de petits pixels. La taille la plus courante pour créer un favicon est de 16x16 pixels. Néanmoins, ils peuvent également apparaître dans des dimensions un peu plus grandes (32x32). Maintenant, à l’intérieur de la balise HTML <head>, ouvrez la balise <link> et utilisez l’attribut rel à l’intérieur. Définissez l’attribut rel sur icon. Après cela, écrivez l’attribut href et spécifiez le fichier image PNG que vous souhaitez utiliser comme favicon à l’intérieur des guillemets. Après cela, fermez toutes les balises précédemment ouvertes.
Ici, nous avons utilisé l’image favicon.png comme favicon. L’image est située dans le système local. De cette façon, nous pouvons ajouter un favicon à une page Web en HTML.
Exemple de code :
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Utilisez <link rel="icon"> et une image ICO pour ajouter un favicon pour le site Web en HTML
Nous pouvons utiliser l’image ICO pour ajouter le favicon dans un site Web en HTML à des fins de compatibilité descendante. Presque tous les navigateurs modernes prennent en charge l’image PNG à utiliser comme favicon. Pour les navigateurs comme IE10 et ses versions précédentes, nous pouvons utiliser des images ICO. Les images ICO ont .ico comme extension. Nous pouvons utiliser des outils tels que ConvertICO pour convertir les images PNG en ICO.
Par exemple, parcourez le site Web ConvertICO et téléchargez le fichier favicon.png. Le site Web convertira l’image au format ICO et nous permettra de la télécharger. Ensuite, utilisez le chemin de l’image dans l’attribut href dans la balise <link> comme fait dans la première méthode. Ensuite, nous pouvons voir le favicon sur la page Web.
Exemple de code :
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn