[英]Favicon not Showing on Jekyll Site
I have been trying to set up a Favicon for a GitHub Pages site using Jekyll.我一直在尝试使用 Jekyll 为 GitHub Pages 站点设置 Favicon。 However, even when setting the right tags in the HTML head , it still doesn't show.
但是,即使在 HTML head 中设置了正确的标签,它仍然没有显示。 I have tried using:
我试过使用:
<link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png">
and the usual:和通常的:
<link rel="icon" href="./favicon.png" type="image/x-icon">
and all the variations with and without {{ site.baseurl }}
, and with either PNG and ICO images (256x256 and 16x16 respectively) and their respective HTM link tag type
s.以及带有和不带有
{{ site.baseurl }}
所有变体,以及带有 PNG 和 ICO 图像(分别为 256x256 和 16x16)及其各自的 HTM链接标签type
。 Clearing the cache does not work, either.清除缓存也不起作用。
The relevant part of the HTML file is as follows: 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>
The relevant part of the _config.yml
file is as follows: _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
I have navigated to the path of the image given in the link tag and it does indeed exist.我已经导航到链接标签中给出的图像路径,它确实存在。 No errors exist in the console, either.
控制台中也不存在错误。
The GitHub Pages site is not up to date. GitHub Pages 站点不是最新的。 It is hosted under localhost.
它托管在本地主机下。
I notice that when specifying the favicon, you use a path relative to the current directory:我注意到在指定收藏夹图标时,您使用了相对于当前目录的路径:
<link rel="icon" href="./favicon.png" type="image/x-icon">
I use Jekyll with the Liquid filter relative_url for the path above, which safely returns a path that is relative to the domain root:我使用 Jekyll 和 Liquid 过滤器relative_url作为上面的路径,它安全地返回一个相对于域根的路径:
<link rel="icon" href="{{ "./favicon.png" | relative_url }}" type="image/x-icon">
which will return the path "/favicon.png" (and also works when baseurl is set).这将返回路径“/favicon.png”(并且在设置 baseurl 时也有效)。
There may be other issues with your specification of the favicon.您的网站图标规范可能存在其他问题。 I have used realfavicongenerator.net (introduced in some detail here ) to help me correctly specify my site's favicon for various situations, with very good results.
我使用了realfavicongenerator.net (这里有一些详细介绍)来帮助我在各种情况下正确指定我的网站的图标,并取得了非常好的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.