Comment mettre en place un favicon?
J'essaie de faire un exercice préliminaire très simple pour créer un site Web qui crée un favicon.
C'est le code que j'utilise:
<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
Mais cela ne fonctionne pas - quelqu'un peut-il s'il vous plaît aider? J'ai enregistré le fichier favicon.ico au même niveau que mon fichier html (dans un sous-répertoire).
Merci beaucoup
Avec l'introduction des téléphones (i | Android | windows), les choses ont changé et obtenir une solution correcte et complète qui fonctionne sur n'importe quel appareil prend beaucoup de temps.
Vous pouvez jeter un coup d’œil sur https://realfavicongenerator.net/favicon_compatibility ou http://caniuse.com/#search=favicon pour avoir une idée de la meilleure façon d’obtenir quelque chose qui fonctionne. n'importe quel appareil.
Vous devriez jeter un œil sur http://realfavicongenerator.net/ Pour automatiser une grande partie de ce travail, et probablement sur https://github.com/audreyr/favicon- cheat-sheet pour comprendre son fonctionnement (même si cette dernière ressource n'a pas été mise à jour depuis environ un an).
Une solution complète nécessite d’ajouter à votre en-tête les éléments suivants (avec les images et les fichiers correspondants, bien sûr):
<link rel="shortcut icon" href="favicon.ico">
<link rel="Apple-touch-icon" sizes="57x57" href="Apple-touch-icon-57x57.png">
<link rel="Apple-touch-icon" sizes="114x114" href="Apple-touch-icon-114x114.png">
<link rel="Apple-touch-icon" sizes="72x72" href="Apple-touch-icon-72x72.png">
<link rel="Apple-touch-icon" sizes="144x144" href="Apple-touch-icon-144x144.png">
<link rel="Apple-touch-icon" sizes="60x60" href="Apple-touch-icon-60x60.png">
<link rel="Apple-touch-icon" sizes="120x120" href="Apple-touch-icon-120x120.png">
<link rel="Apple-touch-icon" sizes="76x76" href="Apple-touch-icon-76x76.png">
<link rel="Apple-touch-icon" sizes="152x152" href="Apple-touch-icon-152x152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="Apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
En juin 2016, RealFaviconGenerator a déclaré que les 5 lignes de code suivantes prenaient autant de périphériques en charge que les 18 lignes précédentes:
<link rel="Apple-touch-icon" sizes="180x180" href="/Apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
Je l'utilise sur mon site et cela fonctionne très bien.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
Il existe une méthode très simple pour définir un favicon qui existait depuis longtemps, autant que je sache. Placez le fichier favicon.ico à l'emplacement par défaut. c'est à dire
http://www.yoursite.com/favicon.ico
Cela fonctionne dans presque tous les navigateurs sans balise <link> . Cependant, cela ne fonctionne que s'il s'agit d'un fichier *.ico. Les PNG et autres formats doivent encore être liés avec une balise <link>
vous pouvez jeter un oeil au w3 comment , je pense que vous le trouverez utile
votre attribut de balise de lien devrait être rel="icon"
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>
rel="shortcut icon" devrait être rel="icon"
Source: W3C
Par expérience de mon favicon.ico n'apparaissant pas, je partage mon expérience. Vous ne pouvez pas l'afficher avant de placer votre site Web sur un hôte. Essayez donc de le placer sur un hôte local à l'aide de XAMPP - http://www.apachefriends.org/en/xampp.html . Voici comment le favicon apparaît et, comme d’autres recommandé, change:
rel="shortcut icon"
àrel="icon"
De même, les favicons .png peuvent également être utilisés en cas de problème.
Sur mon site, j'utilise ceci:
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
Pour vous simplifier la vie, utilisez ce générateur de favicons http://realfavicongenerator.net
Ci-dessous quelques informations sur l'icône fav
Qu'est-ce que FavIcon? FavIcon n’est autre chose qu’une petite image qui apparaît en haut à gauche avec le titre de la barre d’adresse de l’application. La taille standard pour favicon.ico est de 16 x 16 pixels. Veuillez voir ci-dessous la figure ci-jointe.
Comment ça marche ? Généralement, nous ajoutons notre image FavIcon.ico dans le dossier de solutions de routage et l'application la sélectionne automatiquement lors de l'exécution. Mais la plupart du temps, nous pourrions avoir à utiliser ci-dessous les deux références de lien.
<link rel="icon" href="favicon.ico" type="image/ico"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Certains navigateurs en attendent un (rel = "icon") D'autres navigateurs en attendent un autre rel = "icône de raccourci"
Type = ”image/x-icône” OR Type = ”image/ico”: attendait une image ico exacte et attendait toute image, même formatée .jpg ou .pn ..etc.
Nous devons utiliser ci-dessus deux balises pour les pages communes comme - Page principale, Cadre principal qui est utilisé dans toutes les pages
Cette méthode est recommandée
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
Essayez de mettre ceci dans la tête du document: <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>