网站图标未显示在 Jekyll 网站上

Question

我一直在尝试使用 Jekyll 为 GitHub Pages 站点设置 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链接标签type 。 清除缓存也不起作用。

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

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

编辑：

GitHub Pages 站点不是最新的。 它托管在本地主机下。

Answer 1

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

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

我使用 Jekyll 和 Liquid 过滤器relative_url作为上面的路径，它安全地返回一个相对于域根的路径：

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

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

您的网站图标规范可能存在其他问题。 我使用了realfavicongenerator.net （这里有一些详细介绍）来帮助我在各种情况下正确指定我的网站的图标，并取得了非常好的结果。

网站图标未显示在 Jekyll 网站上

问题描述

编辑：

1 个解决方案

解决方案1
1 已采纳 2020-11-18 20:36:25

网站图标未显示在 Jekyll 网站上

问题描述

编辑：

1 个解决方案

解决方案1 1 已采纳 2020-11-18 20:36:25

解决方案1
1 已采纳 2020-11-18 20:36:25