无法使用 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 页面