Unable to set favicon using Jekyll and github pages

Dror :

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

Christopher Wells :

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Favicon with GitHub Pages

Rendering a GitHub wiki on a GitHub Pages Jekyll site

Jekyll on Github Pages not rendering CSS

Understanding Jekyll and the gh-pages branch when using GitHub Pages

Setting Jekyll environment for GitHub Pages

Get a blank page after pushing a site using Github pages with Jekyll

GitHub Pages Jekyll theme working for pages but not for posts

404 page not working with permalink: pretty using GitHub Pages + Jekyll

Generate category page in jekyll targeting github pages

Unable to build to Github Pages

Github pages jekyll images not loading

Variables available when building static sites using jekyll and github pages

Github Pages and Jekyll permalinks going to different paths

Jekyll includes not working in GitHub Pages without a template

Jekyll and GitHub Pages Site Not Displaying Favicon

using jQuery with Jekyll site hosted on Github pages

Using Github pages with Jekyll in a subdirectory

Animation on jekyll run github pages

Jekyll collection not working on github.pages

GitHub Pages Jekyll won't build

running jekyll locally on a github pages site project

How to prevent jekyll build on github pages

Installing Jekyll 3.8.5 on GitHub Pages

How to separate posts by pages on Jekyll GitHub Pages?

Unable to Deploy to github pages

im using github pages with jekyll using liquid syntax. there is weird thing

Why favicon not working instead of using question mark in the end after deploying on github pages

Jekyll (for GitHub Pages): How to create a carousel of Divs?

Problem with GitHub Pages Jekyll Template