无法使用 Jekyll 和 github 页面设置网站图标

Question

我正在尝试为我的 github 页面设置 favicon.ico，但它不起作用。当我在本地提供服务时，我会看到标准的 "empty" 图标，当我推送它时，我会看到 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 声明更改为以下内容来进行一些快速测试，并且能够显示它网站图标。

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

我尝试在保持 .ico 文件格式的同时让网站图标工作，但一开始无法做到。但是，我进行了一些快速搜索并遇到了这个问题，favicon not displayed by Firefox。

在那个问题中，提问者有一个类似的问题，就是没有显示图标，最终能够通过在 link 的末尾添加 ? 来快速修复favicon 声明中的 favicon 文件。我尝试了这个并且它起作用了。以下是网站图标声明：

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

这两种方法中的任何一种似乎都能解决您的问题。就我个人而言，我建议使用第一种方法，将图像转换为 .png 文件，因为它看起来更简单且不那么hacky。

但是，如果您想将文件保留为 .ico 文件，那么您应该在尝试第二种方法之前阅读我 link 提出的问题，作为接受的答案这个问题与那个解决方案不同。我也不确定为什么第二种方法有效，而且它看起来有点老套。

Answer 2

以防万一有人要找这个。这两种方法都不适合我。但是当我附加 site.url 时，它起作用了

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

Answer 3

我认为目前正确的做法是：

<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 4

我用

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

我在文件夹 images 中有图标。

Answer 5

快速解决

去掉斜线以使 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 页面时发生。

Answer 6

我使用了它：

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

片段注释：

图标的 PNG 格式，
HTML head 标签中的亲戚 URL（在 minimia 中是 head.html）。
添加 relative_url tells Liquid 以将 url 和 baseurl 添加到给定路径。

Answer 7

以上对我没有用，但 this vid 中的步骤（假设最小主题）对我有用。

1) 添加 _includes 目录到你的项目根目录

终端：输入 bundle show minima

_includes/head.html

将 _includes/head.html 从 finder 复制到您的项目根目录中

2) 修改 _includes/head.html 以包含网站图标 link

以下对我有效：<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

Answer 8

在我的例子中，我必须将 favicon.ico 文件添加到资产文件夹并按如下方式引用它：

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

Answer 9

根据文档：

1) 将favicon.ico文件放入jekyll项目的assets/images文件夹中作为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">

完成。

Answer 10

我无法显示图片，我在帖子中使用了 markdown，附加了对我有用的内容，以便其他人受益。

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

这在本地和 github 页面上都有效

无法使用 Jekyll 和 github 页面设置网站图标

Unable to set favicon using Jekyll and github pages

html

favicon

jekyll

github-pages

快速解决

说明

备注