Unable to set favicon using Jekyll and github pages

I use

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

And I have favicon in folder images.

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.

I cloned your project from GitHub to take a look at it. After serving it using Jekyll, the favicon did not display, as you noted.

I did some quick testing by converting the favicon file to be a .png rather than a .ico file and changing the favicon declaration to the following, and that was able to get it to display the favicon.

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

I tried getting the favicon to work while keeping the .ico file format, and was unable to do so at first. However, I did some quick searching and came across this question, favicon not displayed by Firefox.

In that question the asker had a similar issue with the favicon not showing, and was eventually able to come up with a quick fix by adding a ? to the end of the link to the favicon file in the favicon declaration. I attempted this and it worked. Here is what the favicon declaration would be:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">

Either of those two methods seem to be able to fix your issue. Personally I'd recommend using the first method, whereby you convert the image to a .png file, as it seems a bit simpler and less hacky.

However, if you want to keep the file as a .ico file then you should read over the question that I linked to before you attempt the second method, as the accepted answer for the question differed from that solution. Also I'm not sure as to why the second method works, and it does seem a little bit hacky.

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.