無法使用 Jekyll 和 github 頁面設置網站圖標

Question

我正在嘗試為我的 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

Answer 1

我從 GitHub 克隆了你的項目來查看它。 正如您所指出的，在使用 Jekyll 提供服務后，網站圖標沒有顯示。

我通過將 favicon 文件轉換為.png而不是.ico文件並將 favicon 聲明更改為以下內容進行了一些快速測試，並且能夠讓它顯示 favicon。

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

我嘗試在保持.ico文件格式的同時使網站圖標正常工作，但起初無法這樣做。 但是，我進行了一些快速搜索並遇到了這個問題， Firefox 未顯示 favicon 。

在那個問題中，提問者有一個類似的問題，網站圖標沒有顯示，最終能夠通過添加? 到網站圖標聲明中網站圖標文件鏈接的末尾。 我嘗試了這個，它奏效了。 以下是 favicon 聲明的內容：

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

這兩種方法中的任何一種似乎都能解決您的問題。 我個人建議使用第一種方法，即您將圖像轉換為.png文件，因為它看起來更簡單且不那么笨拙。

但是，如果您想將文件保留為.ico文件，那么您應該在嘗試第二種方法之前閱讀我鏈接到的問題，因為該問題的公認答案與該解決方案不同。 另外，我不確定為什么第二種方法有效，而且它看起來確實有點笨拙。

Answer 2

我相信，目前，正確的做法是：

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

假設您使用的是 png。 以下內容也適用於 .ico 而不是 .png：

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

我在 Linux 上使用 Chrome。 Excalibur Zero 的回答或 Ribtoks 的回答都不適合我。

Answer 3

快速解決方案

保留斜杠以使 href 地址相對。

例如：

改變

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

到：

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

在我的github pages 站點中，這非常有效。

解釋

以我的網站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 頁面時。

Answer 4

我用

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

我在文件夾images有圖標。

Answer 5

以上沒有對我有用，但是這個視頻中的步驟（假設最小主題）確實有效。

1) 將_includes目錄添加到您的項目根目錄

• 終端：通過輸入bundle show minima找到_includes/head.html
• 將_includes/head.html從 finder 復制到您的項目根目錄中

2) 修改_includes/head.html以包含 favicon 鏈接

• 以下對我<link rel="shortcut icon" type="image/png" href="/favicon.png"> ： <link rel="shortcut icon" type="image/png" href="/favicon.png">
• 重要提示： /favicon.png前面的/ /favicon.png重要。 沒有/ ，您的網站根目錄將擁有您的網站圖標，但其他端點不會。

3) 將jekyll-seo-tag插件添加到您的_config.yml 。 它應該是這樣的：

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

Answer 6

我開始使用它：

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

片段注意事項：

1. 圖標的PNG格式，
2. HTML head 標簽中的相對 URL（至少是head.html ）。
3. 添加relative_url告訴Liquid將url和baseurl到給定路徑。

Answer 7

根據文檔：

1) 將favicon.ico文件作為assets/images/favicon.ico放入 jekyll 項目的assets/images文件夾中

2) 創建_includes/head_custom.html文件（如果尚不存在）

3）添加所需的覆蓋內容：

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

完畢。

Answer 8

以防萬一有人會尋找這個。 這兩種方法對我都不起作用。 但是當我附加site.url ，它起作用了

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

Answer 9

就我而言，我必須將favicon.ico文件添加到資產文件夾並按如下方式引用它：

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

Answer 10

我無法顯示圖像，我在我的帖子中使用了 Markdown，並附加了對我有用的內容，以便其他人可以受益。

![Description of the image]({{ site.baseurl }}/assets/images/image.png)

這也適用於本地和 github 頁面