web-dev-qa-db-fra.com

Impossible de définir le favicon à l'aide des 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 standard "vide" et quand je le pousse je vois l'icône facebook. Pourquoi en est-il ainsi? 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">

aux autorités compétentes default.html. Vous pouvez voir les sources ici: https://github.com/drorata/drorata.github.io

htmljekyllfavicongithub-pages
50
Dror

J'ai cloné votre projet depuis GitHub pour l'examiner. Après l'avoir servi avec Jekyll, le favicon ne s'affichait pas, comme vous l'avez noté.

J'ai fait quelques tests rapides en convertissant le fichier favicon en .png Plutôt qu'un .ico fichier et en changeant la déclaration de favicon comme suit, et cela a été en mesure de le faire afficher le favicon.

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

J'ai essayé de faire fonctionner le favicon tout en conservant le .ico format de fichier, et n'a pas pu le faire au début. Cependant, j'ai fait quelques recherches rapides et suis tombé sur cette question, favicon non affiché par Firefox .

Dans cette question, le demandeur avait un problème similaire avec le favicon non affiché, 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 tenté cela 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 pouvoir résoudre votre problème. Personnellement, je recommanderais d'utiliser la première méthode, par laquelle vous convertissez l'image en .png fichier, car il semble un peu plus simple et moins hacky.

Cependant, si vous souhaitez conserver le fichier en tant que .ico fichier, vous devez relire la question à laquelle j'ai lié avant d'essayer la deuxième méthode, car la réponse acceptée pour la question différait de cette solution. De plus, je ne sais pas pourquoi la deuxième méthode fonctionne, et cela semble un peu hacky.

93
Christopher Wells

Je pense qu'actuellement, la bonne façon de procéder 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 fonctionné 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 sous Linux. Ni la réponse d'Excalibur Zero ni la réponse de Ribtoks ne fonctionnaient pour moi.

10
user1167662

J'utilise

<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >

Et j'ai favicon dans le dossier images.

2
georger

Je l'ai fait fonctionner en utilisant:

<!-- Add favicon -->
<link rel="shortcut icon" 
      type="image/png" 
      href="{{ '/favicon.png' | relative_url }}" >

Notes sur l'extrait:

  1. Format PNG pour le favicon,
  2. une URL relative dans la balise HTML head (dans minimia c'est head.html).
  3. Ajouter relative_url indique à Liquid de placer les url et baseurl au chemin donné.
2
nazmul idris

Solution rapide

Laissez la barre oblique pour rendre l'adresse href relative.

Par exemple:

Changement

<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

Utiliser mon site https://hustlion.github.io/spanish-cards/ par exemple:

Lorsque vous utilisez <link rel="shortcut icon" type="image/png" href="/favicon.png">, l'adresse de l'icône sera https://hustlion.github.io/favicon.png, car la racine du site (comme spécifié 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">, c'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.

Remarques

Ce problème de chemin d'accès se produit surtout lorsque vous utilisez des pages github pour votre référentiel spécifique.

2
Hustlion

Juste au cas où quelqu'un le chercherait. Les deux approches n'ont pas fonctionné pour moi. Mais quand j'ai ajouté le site.url, ça a marché

<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">
1
Ribtoks

Rien ci-dessus n'a fonctionné pour moi, mais les étapes de cette vidéo (en supposant le thème des minima) l'ont fait.

1) Ajoutez _includes répertoire à la racine de votre projet

  • Terminal: recherchez _includes/head.html en tappant bundle show minima
  • Copie _includes/head.html du Finder dans la racine de votre projet

2) Modifier _includes/head.html pour inclure le lien favicon

  • Ce qui suit fonctionne pour moi: <link rel="shortcut icon" type="image/png" href="/favicon.png">
  • Important: le / en face de /favicon.png importe. Sans le /, la racine de votre site Web aura votre favicon, mais aucun autre point de terminaison n'en aura.

3) Ajoutez le jekyll-seo-tag plugin à votre _config.yml. Ça devrait ressembler a quelque chose comme ca:

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag
1
brntsllvn

Dans mon cas, j'ai dû ajouter le fichier favicon.ico au dossier d'actifs et le référencer comme suit:

<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">
0
Manuel Lopera

selon la documentation:

1) mettez favicon.ico fichier dans assets/images dossier du projet jekyll en tant que assets/images/favicon.ico

2) créez un _includes/head_custom.html fichier s'il n'existe pas encore

3) Ajoutez le contenu prioritaire nécessaire:

<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/favicon.ico">

Terminé.

0
Maksim Kostromin