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

Unable to set favicon using Jekyll and github pages

提问by Dror

I am trying to set a favicon.icofor my github page, but it doesn't work. When I serve it locally I see the standard "empty" favicon and when I push it I see the facebook icon. Why is it so? I have the right favicon.icoin the root directory of my project and I added the line

我正在尝试favicon.ico为我的 github 页面设置一个，但它不起作用。当我在本地提供它时，我会看到标准的“空”图标，而当我推送它时，我会看到 facebook 图标。为什么会这样？我favicon.ico在项目的根目录中拥有权限，并添加了该行

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

to the relevant default.html. You can see the sources here: https://github.com/drorata/drorata.github.io

到相关的default.html。你可以在这里看到源：https: //github.com/drorata/drorata.github.io

回答by Christopher Wells

I cloned your project from GitHub to take a look at it. After serving it using Jekyll, the favicon did not display, as you noted.

我从 GitHub 克隆了你的项目来查看它。正如您所指出的，在使用 Jekyll 提供服务后，网站图标没有显示。

I did some quick testing by converting the favicon file to be a .pngrather than a .icofile and changing the favicon declaration to the following, and that was able to get it to display the favicon.

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

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

I tried getting the favicon to work while keeping the .icofile format, and was unable to do so at first. However, I did some quick searching and came across this question, favicon not displayed by Firefox.

我尝试在保持.ico文件格式的同时使网站图标正常工作，但起初无法这样做。但是，我进行了一些快速搜索并遇到了这个问题，Firefox 未显示 favicon。

In that question the asker had a similar issue with the favicon not showing, and was eventually able to come up with a quick fix by adding a ?to the end of the link to the favicon file in the favicon declaration. I attempted this and it worked. Here is what the favicon declaration would be:

在那个问题中，提问者有一个类似的问题，网站图标没有显示，最终能够通过?在网站图标声明中的网站图标文件链接的末尾添加一个快速解决方案。我尝试了这个，它奏效了。以下是 favicon 声明的内容：

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

Either of those two methods seem to be able to fix your issue. Personally I'd recommend using the first method, whereby you convert the image to a .pngfile, as it seems a bit simpler and less hacky.

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

However, if you want to keep the file as a .icofile then you should read over the question that I linked to before you attempt the second method, as the accepted answer for the question differed from that solution. Also I'm not sure as to why the second method works, and it does seem a little bit hacky.

但是，如果您想将文件保留为文件，.ico那么您应该在尝试第二种方法之前阅读我链接到的问题，因为该问题的公认答案与该解决方案不同。另外，我不确定为什么第二种方法有效，而且它看起来确实有点笨拙。

回答by user1167662

I believe, currently, the correct way to do this is:

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

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

Assuming you are using a png. The following also worked for me with a .ico instead of .png:

假设您使用的是 png。以下内容也适用于 .ico 而不是 .png：

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

I was working with Chrome on Linux. Neither Excalibur Zero's answer or Ribtoks answer worked for me.

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

回答by georger

I use

我用

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

And I have favicon in folder images.

我在文件夹中有 favicon images。

回答by Hustlion

Quick solution

快速解决方案

Leave the slash out to make the href address relative.

保留斜线以使 href 地址相对。

For example:

例如：

Change

改变

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

to:

到：

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

In my github pages sitethis works perfectly.

在我的github pages 站点中，这非常有效。

Explanation

解释

Use my site https://hustlion.github.io/spanish-cards/as an example:

以我的网站https://hustlion.github.io/spanish-cards/为例：

When you use <link rel="shortcut icon" type="image/png" href="/favicon.png">, the icon address will be https://hustlion.github.io/favicon.png, because the root of the site (as specified by the slash in /favicon.png) is https://hustlion.github.io/.

当您使用 时<link rel="shortcut icon" type="image/png" href="/favicon.png">，图标地址将为https://hustlion.github.io/favicon.png，因为站点的根目录（由 中的斜杠指定/favicon.png）是https://hustlion.github.io/。

However, when you use <link rel="shortcut icon" type="image/png" href="favicon.png">, this is relative to the path https://hustlion.github.io/spanish-cards/, so the icon address will be resolved properly as https://hustlion.github.io/spanish-cards/favicon.png.

但是，当您使用 时<link rel="shortcut icon" type="image/png" href="favicon.png">，这是相对于路径的https://hustlion.github.io/spanish-cards/，因此图标地址将正确解析为https://hustlion.github.io/spanish-cards/favicon.png。

Notes

笔记

This path issue happens especially when you are using github pages for your specific repository.

此路径问题尤其发生在您为特定存储库使用 github 页面时。

回答by nazmul idris

I got it to working using:

我开始使用它：

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

Notes on the snippet:

片段注意事项：

1. PNG format for the favicon,
2. a relative URL in the HTML head tag (in minimiathis is head.html).
3. Adding relative_urltells Liquidto prepend the urland baseurlto the given path.

1. 图标的 PNG 格式，
2. HTML head 标记中的相对 URL（至少是head.html）。
3. 添加relative_url告诉Liquid将url和添加baseurl到给定的路径。

回答by brntsllvn

Nothing above worked for me, but the steps in this vid(assuming the minima theme) did.

以上没有对我有用，但是这个视频中的步骤（假设最小主题）确实有效。

1) Add _includesdirectory to your project root

1）将_includes目录添加到您的项目根目录

• Terminal: find _includes/head.htmlby typing bundle show minima
• Copy _includes/head.htmlfrom finder into your project root

• 终端：_includes/head.html通过键入查找bundle show minima
• _includes/head.html从 finder复制到您的项目根目录

2) Modify _includes/head.htmlto include favicon link

2) 修改_includes/head.html为包含 favicon 链接

• The following works for me: <link rel="shortcut icon" type="image/png" href="/favicon.png">
• Important: the /in front of /favicon.pngmatters. Without the /, your website root will have your favicon but no other endpoints will.

• 以下对我有用： <link rel="shortcut icon" type="image/png" href="/favicon.png">
• 重要：/眼前的/favicon.png事情。如果没有/，您的网站根目录将拥有您的网站图标，但其他端点不会。

3) Add the jekyll-seo-tagplugin to your _config.yml. It should look something like this:

3) 将jekyll-seo-tag插件添加到您的_config.yml. 它应该是这样的：

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

回答by Ribtoks

Just in case someone will be looking for this. Both approaches didn't work for me. But when I appended the site.url, it worked

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

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

回答by Manuel Lopera

In my case, I had to add the favicon.ico file to the assets folder and reference it as follows:

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

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

回答by Maksim Kostromin

according to documentation:

根据文档：

1) put favicon.icofile into assets/imagesfolder of jekyll project as assets/images/favicon.ico

1）将favicon.ico文件放入assets/imagesjekyll项目的文件夹中assets/images/favicon.ico

2) create a _includes/head_custom.htmlfile if not yet exists

2)_includes/head_custom.html如果文件不存在则创建一个文件

3) add needed overriding content:

3）添加所需的覆盖内容：

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

Done.

完毕。