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 the facebook icon. Why is it so? I have the right favicon.ico in the root directory of my project and I added the line

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

to the relevant default.html. You can see the sources here: https://github.com/drorata/drorata.github.io

score 112 · Accepted Answer · edited May 23 '17 at 12:03

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.

score 18 · Answer 2 · answered Dec 18 '15 at 03:46

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.

score 6 · Answer 3 · edited Jul 07 '17 at 18:24

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.

I'm not sure why this was downvoted, but it's the best explanation of what's going on. Alternatively, you can add the dot before the slash like so: `href="./favicon.png"` — Sia, Feb 05 '18 at 19:53

score 4 · Answer 4 · edited Jul 07 '17 at 18:23

4

I use

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

And I have favicon in folder images.

edited Jul 07 '17 at 18:23

eyllanesc

235,170
19
170
241

answered Mar 07 '16 at 21:41

georger

1,568
21
24

score 4 · Answer 5 · answered Sep 01 '19 at 03:50

according to documentation:

1) put favicon.ico file into assets/images folder of jekyll project as assets/images/favicon.ico

2) create a _includes/head_custom.html file if not yet exists

3) add needed overriding content:

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

Done.

score 3 · Answer 6 · answered Oct 28 '18 at 21:05

Nothing above worked for me, but the steps in this vid (assuming the minima theme) did.

1) Add _includes directory to your project root

Terminal: find _includes/head.html by typing bundle show minima
Copy _includes/head.html from finder into your project root

2) Modify _includes/head.html to include favicon link

The following works for me: <link rel="shortcut icon" type="image/png" href="/favicon.png">
Important: the / in front of /favicon.png matters. Without the /, your website root will have your favicon but no other endpoints will.

3) Add the jekyll-seo-tag plugin to your _config.yml. It should look something like this:

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag

nazmul idris · Answer 7 · 2018-07-30T17:19:56.350

2

I got it to working using:

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

Notes on the snippet:

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

edited Jul 30 '18 at 17:19

answered Jul 30 '18 at 17:14

nazmul idris

432
6
17

1

It works for me, as well with `.ico` as `.png`, but on Firefox only. – Piotr Miller Jul 29 '22 at 07:23

score 1 · Answer 8 · edited Jul 07 '17 at 18:24

1

Just in case someone will be looking for this. Both approaches didn't work for me. But when I appended the site.url, it worked

<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">

edited Jul 07 '17 at 18:24

eyllanesc

235,170
19
170
241

answered Sep 06 '15 at 16:26

Ribtoks

6,634
1
25
37

Perhaps this is because your site field included a base url? Generally you have a site and a base url. www.example-site.com/example-base/ <- your site.url probably looked like this – visc Aug 29 '16 at 16:40

score 0 · Answer 9 · edited Jun 28 '20 at 10:56

0

In my case, I had to add the favicon.ico file to the assets folder and reference it as follows:

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

edited Jun 28 '20 at 10:56

Yuri

4,254
1
29
46

answered May 10 '19 at 00:20

Manuel Lopera

2,268
1
16
16

score 0 · Answer 10 · answered May 08 '21 at 20:27

0

I couldn't get the images to display and I use markdown for my posts, appending what worked for me so that others may benefit.

![Description of the image]({{ site.baseurl }}/assets/images/image.png)

This works both locally and on github pages as well

answered May 08 '21 at 20:27

Imran Ali

2,223
2
28
41

Unable to set favicon using Jekyll and github pages

10 Answers10

Quick solution

Explanation

Notes

Linked