web-dev-qa-db-ja.com

Jekyllおよびgithubページを使用してファビコンを設定できません

Githubページにfavicon.icoを設定しようとしていますが、機能しません。ローカルで提供すると、標準の「空の」ファビコンが表示され、プッシュするとFacebookのアイコンが表示されます。なぜそうなのですか？プロジェクトのルートディレクトリに正しいfavicon.icoがあり、次の行を追加しました

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

関連するdefault.htmlに。ここでソースを見ることができます： https://github.com/drorata/drorata.github.io

htmljekyllfavicongithub-pages
50
Dror

あなたのプロジェクトをGitHubからクローンして、それを見てみましょう。 Jekyllを使用して提供した後、ファビコンは表示されませんでした。

ファビコンファイルを.pngファイルではなく.icoファイルに変換し、ファビコンの宣言を次のように変更して、ファビコンを表示できるようにすることで、簡単なテストを行いました。

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

.icoファイル形式を維持したままファビコンを機能させようとしましたが、最初はできませんでした。しかし、私はいくつかのクイック検索を行い、この質問に遭遇しました ファビコンはFirefoxに表示されません .

その質問では、質問者はファビコンが表示されないという同様の問題を抱えていたため、最終的にファビコン宣言のファビコンファイルへのリンクの最後に?を追加することで簡単な修正を思いつくことができました。私はこれを試みましたが、うまくいきました。ファビコンの宣言は次のとおりです。

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

これら2つの方法のいずれかで問題を解決できるようです。個人的には、画像を.pngファイルに変換する最初の方法を使用することをお勧めします。これは少しシンプルでハッキングが少ないように思えます。

ただし、ファイルを.icoファイルとして保持する場合は、2番目の方法を試す前にリンクした質問を読んでください。質問に対する受け入れられた答えはそのソリューションとは異なります。また、2番目の方法がなぜ機能するのかはわかりませんが、少しハッキーなようです。

93
Christopher Wells

現在、これを行う正しい方法は次のとおりです。

<link rel="shortcut icon" type="image/png" href="{{ "/favicon.png" | prepend: site.baseurl }}" >

Pngを使用していると仮定します。以下も.pngの代わりに.icoを使用して機能しました。

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

私はLinuxでChromeを使用していました。ExcaliburZeroの答えもRibtoksの答えもうまくいきませんでした。

10
user1167662

私が使う

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

そして、フォルダーimagesにファビコンがあります。

2
georger

私はそれを使って動作するようにしました：

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

スニペットに関する注意：

  1. ファビコンのPNG形式、
  2. hTMLヘッドタグ内の相対URL（ minimia これはhead.html）。
  3. 追加 relative_url は、 Liquid にurlおよびbaseurlを指定されたパスの先頭に追加するよう指示します。
2
nazmul idris

クイックソリューション

Hrefアドレスを相対的にするために、スラッシュを省略します。

例えば：

変化する

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

に：

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

私の github pages site ではこれは完璧に機能します。

説明

私のサイトhttps://hustlion.github.io/spanish-cards/を例として使用してください：

<link rel="shortcut icon" type="image/png" href="/favicon.png">を使用する場合、サイトのルート（https://hustlion.github.io/favicon.pngのスラッシュで指定）は/favicon.pngであるため、アイコンアドレスはhttps://hustlion.github.io/になります。

ただし、<link rel="shortcut icon" type="image/png" href="favicon.png">を使用する場合、これはパスhttps://hustlion.github.io/spanish-cards/に相対的であるため、アイコンアドレスはhttps://hustlion.github.io/spanish-cards/favicon.pngとして適切に解決されます。

ノート

このパスの問題は、特定のリポジトリにgithubページを使用している場合に特に発生します。

2
Hustlion

誰かがこれを探している場合に備えて。どちらのアプローチも私にはうまくいきませんでした。しかし、site.url、 出来た

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

上記では何も機能しませんでしたが、 this vid （最小テーマを想定）の手順は機能しました。

1）_includesディレクトリをプロジェクトルートに追加します

  • ターミナル：_includes/head.htmlと入力してbundle show minimaを検索します
  • _includes/head.htmlをFinderからプロジェクトルートにコピーします

2）_includes/head.htmlを変更してファビコンリンクを含める

  • 以下は私のために働く：<link rel="shortcut icon" type="image/png" href="/favicon.png">
  • 重要：/の前にある/favicon.pngが重要です。 /がない場合、ウェブサイトのルートにはファビコンがありますが、他のエンドポイントにはありません。

3）jekyll-seo-tagプラグインを_config.ymlに追加します。次のようになります。

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

私の場合、favicon.icoファイルをassetフォルダーに追加し、次のように参照する必要がありました。

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

ドキュメントによると：

1）favicon.icoファイルをassets/images jekyllプロジェクトのフォルダーassets/images/favicon.ico

2）_includes/head_custom.htmlファイルが存在しない場合

3）必要なオーバーライドコンテンツを追加します。

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

できた.

0
Maksim Kostromin