Jekyll 站点上未显示 Favicon

Question

我一直在尝试使用 Jekyll 为 GitHub 页面站点设置 Favicon。但是，即使在 HTML head 中设置了正确的标签，它仍然不会显示。我试过使用：

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

和通常的：

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

以及所有带有和不带有 {{ site.baseurl }} 的变体，以及带有 PNG 和 ICO 图像（分别为 256x256 和 16x16）及其各自的 HTM link标记 types。清缓存也不行。

HTML文件的相关部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
<title>EZCompile PHP</title>
<meta name="generator" content="Jekyll v4.1.1" />
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<meta property="og:title" content="Your awesome title" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="The Easy way to compile and install PHP and MySQL on MacOS, Windows, and Linux." />
<meta property="og:description" content="The Easy way to compile and install PHP and MySQL on MacOS, Windows, and Linux." />
<link rel="canonical" href="https://one-and-only.github.io/EZCompile-PHP/" />
<meta property="og:url" content="https://one-and-only.github.io/EZCompile-PHP/" />
<meta property="og:site_name" content="EZCompile PHP" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="EZCompile PHP" />
<script type="application/ld+json">
{"url":"https://one-and-only.github.io/EZCompile-PHP/","name":"EZCompile PHP","headline":"EZCompile PHP","description":"The Easy way to compile and install PHP and MySQL on MacOS, Windows, and Linux.","@type":"WebSite","@context":"https://schema.org"}</script>
<!-- Integrate Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>

_config.yml文件的相关部分如下：

title: "EZCompile PHP"
email: 'email@gmail.com'
author: "name"
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
github_username:  one-and-only
plugins:
    - jekyll-seo-tag

我已经导航到 link 标签中给出的图像路径，它确实存在。控制台中也没有错误。

编辑：

GitHub 页面站点不是最新的。它托管在 localhost 下。

Answer 1

我注意到在指定网站图标时，您使用了相对于当前目录的路径：

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

我将 Jekyll 与 Liquid 过滤器 relative_url 用于上面的路径，它安全地 return 是一个相对于域根目录的路径：

<link rel="icon" href="{{ "./favicon.png" | relative_url }}" type="image/x-icon">

这将 return 路径“/favicon.png”（并且在设置 baseurl 时也有效）。

您的网站图标规范可能存在其他问题。我已经使用 realfavicongenerator.net (introduced in some detail here) 帮助我在各种情况下正确指定网站的图标，并取得了很好的效果。

Jekyll 站点上未显示 Favicon

Favicon not Showing on Jekyll Site

html

jekyll

编辑：