Impossible de définir favicon en utilisant les pages Jekyll et github
J'essaie de définir un favicon.ico pour ma page github, mais cela ne fonctionne pas. Quand je le sers localement, je vois le favicon "vide" standard et quand je le pousse, je vois l'icône facebook. Pourquoi est-il si? J'ai le droit favicon.ico dans le répertoire racine de mon projet et j'ai ajouté la ligne
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Au default.html pertinent. Vous pouvez voir les sources ici: https://github.com/drorata/drorata.github.io
6 réponses
J'ai cloné votre projet de GitHub pour y jeter un oeil. Après l'avoir servi en utilisant Jekyll, le favicon ne s'affichait pas, comme vous l'avez noté.
J'ai fait quelques tests rapides en convertissant le fichier favicon pour être un .png plutôt qu'un fichier .ico et en changeant la déclaration favicon comme suit, et cela a pu l'obtenir pour afficher le favicon.
<link rel="shortcut icon" type="image/png" href="/favicon.png">
J'ai essayé de faire fonctionner le favicon tout en gardant le format de fichier .ico, et j'ai été incapable de le faire au début. Cependant, j'ai fait quelques recherche rapide et est tombé sur cette question, favicon non affiché par Firefox .
Dans cette question, le demandeur avait un problème similaire avec le favicon ne montrant pas, et a finalement pu trouver une solution rapide en ajoutant un ? à la fin du lien vers le fichier favicon dans la déclaration favicon. J'ai essayé et cela a fonctionné. Voici ce que serait la déclaration favicon:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">
L'une ou l'autre de ces deux méthodes semble être capable de résoudre votre problème. Personnellement, je serais recommande d'utiliser la première méthode, par laquelle vous convertissez l'image en un fichier .png, car cela semble un peu plus simple et moins hacky.
Cependant, si vous voulez conserver le fichier en tant que fichier .ico, vous devriez lire la question à laquelle j'ai lié avant d'essayer la deuxième méthode, car la réponse acceptée à la question différait de cette solution. Aussi, je ne suis pas sûr de savoir pourquoi la deuxième méthode fonctionne, et cela semble un peu hacky.
Je crois, actuellement, la bonne façon de le faire est:
<link rel="shortcut icon" type="image/png" href="{{ "/favicon.png" | prepend: site.baseurl }}" >
En supposant que vous utilisez un png. Ce qui suit a également travaillé pour moi avec un .ico au lieu de .png:
<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >
Je travaillais avec Chrome sur Linux. Ni la réponse D'Excalibur Zero ni la réponse de Ribtoks n'ont fonctionné pour moi.
J'utilise
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >
Et j'ai favicon dans le dossier images.
Juste au cas où quelqu'un chercherait ceci. Les deux approches n'ont pas fonctionné pour moi. Mais quand j'ai ajouté le site.url, cela a fonctionné
<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">
Solution Rapide
Laissez la barre oblique pour rendre l'adresse href relative.
Par exemple:
Changer
<link rel="shortcut icon" type="image/png" href="/favicon.png">
À:
<link rel="shortcut icon" type="image/png" href="favicon.png">
Dans mon site de pages GitHub cela fonctionne parfaitement.
Explication
Utilisez mon site https://hustlion.github.io/spanish-cards/ à titre d'exemple:
Lorsque vous utilisez <link rel="shortcut icon" type="image/png" href="/favicon.png">, l'icône de l'adresse https://hustlion.github.io/favicon.png, parce que la racine du site (comme indiqué par la barre oblique dans /favicon.png) est https://hustlion.github.io/.
Cependant, lorsque vous utilisez <link rel="shortcut icon" type="image/png" href="favicon.png">, cette est relatif au chemin https://hustlion.github.io/spanish-cards/, donc l'adresse de l'icône sera résolue correctement comme https://hustlion.github.io/spanish-cards/favicon.png.
Notes
Ce problème de chemin se produit surtout lorsque vous utilisez des pages github pour votre référentiel spécifique.
Je l'ai eu à travailler en utilisant:
<!-- Add favicon -->
<link rel="shortcut icon"
type="image/png"
href="{{ '/favicon.png' | relative_url }}" >
Notes sur l'extrait:
- format PNG pour le favicon,
- une URL relative dans la balise head HTML (dans minimia c'est
head.html). - Ajout d'
relative_urldit Liquide pour ajouter leurletbaseurlpour le chemin d'accès donné.