Comment ajouter une icône à l'onglet Titre de votre site Web dans HTML

Pour ajouter une icône à la barre de titre du site Web, vous devez lier un fichier Favicon dans la partie du HTML. Les étapes spécifiques sont les suivantes: 1. Préparez un fichier d'icône 16x16 ou 32x32 pixels. Il est recommandé d'utiliser Favicon.ico pour le nommer et le placer dans le répertoire racine du site Web, ou utiliser des formats modernes tels que PNG et SVG; 2. Ajoutez des balises de liaison dans le HTML, telles que , et ajustez l'attribut type en conséquence si vous utilisez le format png ou svg; 3. Ajouter éventuellement des icônes haute résolution pour les appareils mobiles, tels que l'icône Apple Touch, et spécifiez différentes tailles via l'attribut de tailles; 4. Suivez les meilleures pratiques, placez les icônes dans le répertoire racine pour assurer la détection automatique, effacer le cache du navigateur après les mises à jour, vérifier la précision du chemin du fichier et hiérarchiser l'utilisation du format SVG qui peut être mise à l'échelle et prend en charge le mode Dark, en fin de compte, en s'assurant que les icônes sont affichées correctement et compatibles avec tous les types de périphériques.

Pour ajouter une icône à l'onglet Titre de votre site Web (également connu sous le nom de Favicon), vous devez lier un petit fichier d'icône dans la section de votre document HTML. Voici comment le faire correctement:

1. Préparez votre fichier Favicon

Le favicon est généralement une petite image carrée, le plus souvent 16x16 ou 32x32 pixels. Le format recommandé est .ico , mais les navigateurs modernes prennent également en charge .png , .svg et d'autres formats d'image.

• Nommez votre fichier favicon.ico (c'est le nom de nom par défaut recherche).
• Placez-le dans le répertoire racine de votre site Web afin qu'il soit automatiquement détecté ou le liez explicitement dans votre HTML.

Alternativement, vous pouvez utiliser un PNG ou un SVG pour une meilleure qualité:

• favicon.png (par exemple, 32x32 ou 64x64 pixels)
• favicon.svg (prend en charge l'évolutivité et plusieurs tailles)

Vous pouvez générer un fichier .ico à partir d'un PNG ou d'un JPG en utilisant des outils en ligne gratuits ou des éditeurs d'image.

2. LIEND LE FAVICON dans votre HTML

Ajoutez une balise <link> à l'intérieur de la section de votre fichier html:

 <link rel = "icon" href = "favicon.ico" type = "image / x-icon">

Si vous utilisez une PNG:

 <link rel = "icon" type = "image / png" href = "favicon.png">

Pour un SVG Favicon:

 <link rel = "icon" type = "image / svg xml" href = "favicon.svg">

✅ Astuce: vous pouvez utiliser plusieurs formats FAVICON pour une meilleure compatibilité et un meilleur support de résolution.

3. Facultatif: ajouter des icônes haute résolution (icône Apple Touch, etc.)

Pour les appareils mobiles, en particulier les produits Apple, vous voudrez peut-être inclure une icône tactile:

 <link rel = "Apple-Touch-icon" href = "Apple-Touch-icon.png">

Vous pouvez également spécifier des tailles:

 <link rel = "Apple-Touch-icon" tailles = "180x180" href = "Apple-Touch-icon.png">

Et pour différents appareils:

 <link rel = "icon" type = "image / png" tailles = "32x32" href = "/ icons / favicon-32x32.png">
<link rel = "icon" type = "image / png" tailles = "16x16" href = "/ icons / favicon-16x16.png">

4. meilleures pratiques

• Utilisez le répertoire racine : placer favicon.ico dans la racine (par exemple, https://yoursite.com/favicon.ico ) - de nombreux navigateurs le demanderont automatiquement.
• Effacer le cache du navigateur : les navigateurs se cachent fortement les favicons. Après la mise à jour, effacez votre cache ou testez dans une fenêtre incognito.
• Vérifiez les chemins de fichier : assurez-vous que le chemin href dans la balise <link> est correct par rapport à votre fichier html.
• Utilisez des formats modernes : les favicons SVG sont évolutifs et fonctionnent bien avec le mode sombre s'il est correctement stylé.

Fondamentalement, incluez simplement une icône de taille correcte et liez-la dans le en utilisant <link rel="icon"> . Il est simple mais facile de négliger les problèmes de cache ou de chemin de fichier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!