Unable to set favicon using Jekyll and github pages

Question

I am trying to set a favicon.ico for my github page, but it doesn\'t work. When I serve it locally I see the standard \"empty\" favicon and when I push it I see

Answer 1

Quick solution

Leave the slash out to make the href address relative.

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.

Explanation

Use my site https://hustlion.github.io/spanish-cards/ as an example:

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/.

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.

Notes

This path issue happens especially when you are using github pages for your specific repository.

Answer 2

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. The following also worked for me with a .ico instead of .png:

<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >

I was working with Chrome on Linux. Neither Excalibur Zero's answer or Ribtoks answer worked for me.

Answer 3

I got it to working using:

<!-- Add favicon -->
<link rel="shortcut icon" 
      type="image/png" 
      href="{{ '/favicon.png' | relative_url }}" >

Notes on the snippet:

1. PNG format for the favicon,
2. a relative URL in the HTML head tag (in minimia this is head.html).
3. Adding relative_url tells Liquid to prepend the url and baseurl to the given path.