I have been trying to set up a Favicon for a GitHub Pages site using Jekyll. However, even when setting the right tags in the HTML head, it still doesn't show. 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 types. Clearing the cache does not work, either.
The relevant part of the HTML file is as follows:
<!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/[email protected]/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/[email protected]/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:
title: "EZCompile PHP"
email: '[email protected]'
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. 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:
<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).
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.