Icône de favori HTML

Favicon est la forme abrégée d'une icône de favoris, également appelée icône de signet. Elle peut être définie comme un petit logo avec une extension de fichier .ico, et non avec un autre fichier .bmp ou .gif habituellement vu dans la barre d'adresse avec un image personnalisée de l'URL fréquemment visitée, aide à une publicité, à promouvoir ou est faite comme une marque standard, joue quant à elle un aspect essentiel dans les sites Web comme Google, Facebook où nous avons noté un petit logo dans le côté gauche de la barre d'adresse qui donne un aspect professionnel et apparaît dans les signets favoris des utilisateurs et également sans icône favicon, le site Web reste une icône de page Web générique et est privilégié comme raccourci depuis l'icône du favori.

L'exemple en temps réel est présenté ci-dessous. En cliquant sur les favoris dans le signet, vous affichez des icônes typiques. Même certains services Web utilisant XML et les moteurs de recherche utilisent le favicon pour leur caractère unique.

Syntaxe :

La balise méta principale est indiquée ci-dessous pour créer un lien vers la page Web.

<link rel="icon" href="image path"  type="image/icon type">

Dans la syntaxe ci-dessus, vous remplacez le chemin de l'image par l'emplacement réel du favicon.ico, que vous pouvez placer dans un répertoire d'images. Le dernier type de valeur est un fichier au format MIME. Vous pouvez utiliser n'importe quel type d'image ici, mais nous considérons le format GIF comme plus avancé.

Comment créer une favicon HTML ?

Un web designer crée son icône personnalisée et l'associe à la page web. Les navigateurs prenant en charge une favicon l'affichent dans leur barre d'adresse particulière, et ce de deux manières. Deuxièmement, il s'affiche avec l'interface du document à onglets dans le lien suivant. Même lorsqu'il est sélectionné depuis son disque dur, le favicon doit avant tout utiliser le format de fichier (.ico). Il existe quelques services gratuits qui peuvent convertir l'image.

Une fois qu'un développeur a terminé la conception d'un site Web, il ajoute une favicon. Il remplace simplement une icône de document vierge sur l'onglet du navigateur par une icône de page Web officielle. Cela permet à un utilisateur de rendre un site Web plus accessible ou de trouver un site Web plus accessible. Le moteur de recherche le plus populaire, Google, impressionne ou s'identifie à l'utilisateur grâce à son thème de logo. Comme l’icône est trop petite, elle doit être claire et compréhensible pour l’utilisateur. Il existe différentes méthodes pour créer un Favicon. Méthode 1 – génération automatique à l'aide du gestionnaire de fichiers, méthode -2 : téléchargement d'une image normale.

Étapes pour créer favicon.ico. C'est un processus d'atterrissage simple :

1. Génération d'une image d'une taille de 16 x 16 pixels (Reconnaissance d'une image). Ici, vous pouvez redimensionner l'image pour la rendre plus petite afin de l'utiliser comme favicon.
2. Effectuez une conversion au format de fichier favicon.ico pour la compréhension du navigateur.
3. Téléchargement d'une icône générée sur le site Web.
4. L'étape suivante consiste à ajouter le code au HTML. Vous pouvez même utiliser une favicon comme icône de bureau ou Apple.

Comment insérer un favicon dans un fichier HTML ?

Vous pouvez également créer le favicon avec un arrière-plan transparent, en utilisant le format .gif ou .png. La question peut se poser : pourquoi avons-nous besoin d’un favicon ? La réponse est très simple : promouvoir et commercialiser notre site Web dans le monde entier. La petite icône rend une page Web un peu plus professionnelle. Vous ajoutez le favicon à un fichier HTML, qui doit avoir une caractéristique particulière. Vous pouvez ajouter ou modifier le favicon sur le site à tout moment.

• Nom standard avec un format de fichier : Une fois qu'une image est créée et nommée, la valeur par défaut a un favicon.ico (fichiers ICO créés avec X-ICON Editor).
• Taille d'un fichier image : 16 * 16, 64 * 64, 128 * 128 pixels, et les fichiers ne doivent pas dépasser 100 Ko.
• Couleur : peut-être 8 piqûres, 24 ou 32 piqûres
• Image : Doit être au format gif ou png.

Le favicon est placé entre le élément et remplace un emplacement d’image. Il utilise une balise de lien qui définit un lien vers le fichier. Il utilise deux attributs, rel et href. Nous pouvons utiliser Photoshop avec des plugins et d'autres générateurs en ligne pour convertir un fichier image au format .ico.

Chemin d'emplacement de l'icône : il s'agit d'une implémentation standard.

<link rel=" icon" ……….../>      // It installs variety of icons.
<link rel =" Shortcut icon" href=……….../>   // here in the link attribute shortcut installs its own address bar icon.

Le code suivant est utilisé pour les utilisateurs IOS :

<link rel =" apple-touch -icon" sizes ="180 x 180  href=……….../>

Vous trouverez ci-dessous un exemple de code que nous pouvons utiliser dans le code HTML.

Exemple :

<!-- HTML code demo to display an icon in an address bar-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>
EDUCBA  icon
</title>
<link rel = "icon" href =https://favi.png  type = "image/x-icon">
</head>
<body>
<h1 style = "color:blue;">
EDUCBA Icon
</h1>
<p>
Icon is added to the address bar
</p>
</body>
</html>

Sortie :

Explication du code : J'ai créé une petite icône ovale dans le code ci-dessus et je l'ai convertie en favicon. On remarque qu'une icône s'affiche dans Internet Explorer, mais de nombreux navigateurs ne la supportent pas. IE prend l'icône du répertoire racine. Le fichier HTML affiche une erreur 404 de la réponse du serveur si aucun chemin spécifié n'existe. Vous devrez probablement vider le cache de votre site Web pour mettre à jour la favicon, car les navigateurs Web conservent constamment les favicons en cache.

Hinweis: Obwohl die Favicon-Erstellung erfolgreich abgeschlossen wurde, ist sie nicht in allen Browser-Registerkarten sichtbar. Die gute Kompatibilität besteht mit Internet Explorer 5.0+ und Netscape 7.0+. Die meisten modernen Browser unterstützen verschiedene Grafikformate als Favicon. Das Problem tritt auf, wenn ein Server nicht richtig konfiguriert ist: Es ist notwendig, den Root im .ico-Format vom Typ „image/x-icon“ zu erstellen.

Fazit

Abschließend möchte ich sagen, dass das Favicon-Logo eine entscheidende Rolle bei der Website-Entwicklung spielt. Außerdem haben wir verschiedene Methoden zum Erstellen eines Favicons gesehen, wodurch eine browserübergreifende Kompatibilität erreicht wird. Dieses Symbol hilft beim Erstellen einer visuellen Spezifikation mit dem Domänennamen. Das Hinzufügen zur Website ist einfach, da sie die Wiedererkennung und das Branding der Website steuern und den Webdesigner dabei unterstützen, ihre Professionalität zu kennzeichnen.

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!