快速解决方案

Question

我正在尝试为我的github页面设置favicon.ico，但它不起作用。当我在本地服务时，我看到标准＆＃34;空＆＃34; favicon，当我推它时，我看到了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没有显示。

我做了一些快速测试，将favicon文件转换为.png而不是.ico文件，并将favicon声明更改为以下内容，并且能够让它显示图标

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

我尝试在保留.ico文件格式的同时让favicon工作，但最初无法这样做。但是，我做了一些快速搜索并遇到了这个问题，favicon not displayed by Firefox。

在那个问题中，提问者有一个与favicon没有显示的类似问题，最终能够通过在favicon中的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

我用

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

我在文件夹images中有个图标。

Answer 4

我可以使用它了：

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

有关代码段的注释：

收藏夹图标的PNG格式
HTML头标记中的相对URL（在minimia中为head.html）。
添加relative_url会告诉Liquid将url和baseurl放在给定路径之前。

Answer 5

以防万一有人会寻找这个。这两种方法对我都没有用。但是当我添加site.url时，它就可以了

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

Answer 6

快速解决方案

保留斜线以使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 7

上面的内容对我没有用，但是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

Answer 8

就我而言，我必须将favicon.ico文件添加到资产文件夹，并按如下所示引用它：

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

Answer 9

根据文档：

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

完成。

Answer 10

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

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

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

无法使用Jekyll和github页面设置favicon

10 个答案:

快速解决方案

解释

注释