[英]Unable to set favicon using Jekyll and github pages
I am trying to set a favicon.ico
for my github page, but it doesn't work.我正在尝试为我的 github 页面设置
favicon.ico
,但它不起作用。 When I serve it locally I see the standard "empty" favicon and when I push it I see the facebook icon.当我在本地提供它时,我会看到标准的“空”图标,而当我推送它时,我会看到 Facebook 图标。 Why is it so?
为什么会这样? I have the right
favicon.ico
in the root directory of my project and I added the line我在项目的根目录中有正确的
favicon.ico
并添加了该行
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
to the relevant default.html
.到相关的
default.html
。 You can see the sources here: https://github.com/drorata/drorata.github.io你可以在这里看到源: https : //github.com/drorata/drorata.github.io
I cloned your project from GitHub to take a look at it.我从 GitHub 克隆了你的项目来查看它。 After serving it using Jekyll, the favicon did not display, as you noted.
正如您所指出的,在使用 Jekyll 提供服务后,网站图标没有显示。
I did some quick testing by converting the favicon file to be a .png
rather than a .ico
file and changing the favicon declaration to the following, and that was able to get it to display the favicon.我通过将 favicon 文件转换为
.png
而不是.ico
文件并将 favicon 声明更改为以下内容进行了一些快速测试,并且能够让它显示 favicon。
<link rel="shortcut icon" type="image/png" href="/favicon.png">
I tried getting the favicon to work while keeping the .ico
file format, and was unable to do so at first.我尝试在保持
.ico
文件格式的同时使网站图标正常工作,但起初无法这样做。 However, I did some quick searching and came across this question, favicon not displayed by Firefox .但是,我进行了一些快速搜索并遇到了这个问题, 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
.png
file, as it seems a bit simpler and less hacky.我个人建议使用第一种方法,即您将图像转换为
.png
文件,因为它看起来更简单且不那么笨拙。
However, if you want to keep the file as a .ico
file 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.但是,如果您想将文件保留为
.ico
文件,那么您应该在尝试第二种方法之前阅读我链接到的问题,因为该问题的公认答案与该解决方案不同。 Also I'm not sure as to why the second method works, and it does seem a little bit hacky.另外,我不确定为什么第二种方法有效,而且它看起来确实有点笨拙。
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.假设您使用的是 png。 The following also worked for me with a .ico instead of .png:
以下内容也适用于 .ico 而不是 .png:
<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >
I was working with Chrome on Linux.我在 Linux 上使用 Chrome。 Neither Excalibur Zero's answer or Ribtoks answer worked for me.
Excalibur Zero 的回答或 Ribtoks 的回答都不适合我。
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 site this works perfectly.在我的github pages 站点中,这非常有效。
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
。
This path issue happens especially when you are using github pages for your specific repository.此路径问题尤其发生在您为特定存储库使用 github 页面时。
I use我用
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >
And I have favicon in folder images
.我在文件夹
images
有图标。
Nothing above worked for me, but the steps in this vid (assuming the minima theme) did.以上没有对我有用,但是这个视频中的步骤(假设最小主题)确实有效。
1) Add _includes
directory to your project root 1) 将
_includes
目录添加到您的项目根目录
_includes/head.html
by typing bundle show minima
bundle show minima
找到_includes/head.html
_includes/head.html
from finder into your project root_includes/head.html
从 finder 复制到您的项目根目录中2) Modify _includes/head.html
to include favicon link 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">
: <link rel="shortcut icon" type="image/png" href="/favicon.png">
/
in front of /favicon.png
matters./favicon.png
前面的/
/favicon.png
重要。 Without the /
, your website root will have your favicon but no other endpoints will./
,您的网站根目录将拥有您的网站图标,但其他端点不会。 3) Add the jekyll-seo-tag
plugin to your _config.yml
. 3) 将
jekyll-seo-tag
插件添加到您的_config.yml
。 It should look something like this:它应该是这样的:
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
- jekyll-seo-tag
I got it to working using:我开始使用它:
<!-- Add favicon -->
<link rel="shortcut icon"
type="image/png"
href="{{ '/favicon.png' | relative_url }}" >
Notes on the snippet:片段注意事项:
head.html
). head.html
)。relative_url
tells Liquid to prepend the url
and baseurl
to the given path.relative_url
告诉Liquid将url
和baseurl
到给定路径。according to documentation:根据文档:
1) put favicon.ico
file into assets/images
folder of jekyll project as assets/images/favicon.ico
1) 将
favicon.ico
文件作为assets/images/favicon.ico
放入 jekyll 项目的assets/images
文件夹中
2) create a _includes/head_custom.html
file 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.完毕。
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">
就我而言,我必须将favicon.ico
文件添加到资产文件夹并按如下方式引用它:
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">
I couldn't get the images to display and I use markdown for my posts, appending what worked for me so that others may benefit.我无法显示图像,我在我的帖子中使用了 Markdown,并附加了对我有用的内容,以便其他人可以受益。
![Description of the image]({{ site.baseurl }}/assets/images/image.png)
This works both locally and on github pages as well这也适用于本地和 github 页面
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.