I'm trying to get a favicon to appear on a Jekyll GitHub Pages site. I'm using the Bulma Clean Theme and have placed a PNG favicon in the project's main directory. However, the favicon does not appear in my web browser (Chrome).
The theme's documentation states, "The default favicon path is {{ site.baseurl }}/favicon.png but you can overwrite it in the sites _config.yml like this favicon: /path/to/favicon.png". I have not changed the default favicon path.
The site is https://nlakritz.github.io/ach, any help would be much appreciated!
Yes it is working (tested on Chrome 84.0).
But then also if it is not working for you, then avoid using shortcut in rel="shortcut icon", such that <link rel="icon" type="image/png" href="./favicon.png">.
I found a lot of entries in my logfile, which indicate that somebody tried to load /favicon.ico and similar files
GET - /favicon.ico
GET - /apple-touch-icon.png
GET - /apple-touch-icon-precomposed.png
I read a lot about this issue online, but I can't get rid of it. Here is what I trued. First I added the following to my head tag
<link rel="shortcut icon" href="/static/favicon/favicon.ico" type="image/x-icon">
However, even though I provide this information in my header, there seem to be browsers out there which don't care about it and still call /favicon.ico?
So I thought just putting the ico file at root and be done with it, but it does not seem to work? If I call
http://localhost:5000/static/favicon/favicon.ico
I get to the icon, but
http://localhost:5000/favicon.ico
Does not work (gives 404)? I cleared my cache and tried it with Chrome and Safari, but I get 404 in both cases? I am really at a loss here. If I move the image in the static folder and call
http://localhost:5000/static/favicon.ico
it works, but the root folder doesn't? What am I missing here?
By default, the flask will only serve files on the /static endpoint. You can add a custom view to handle the default /favicon request.
The flask documentation has some more information on this subject:
https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/
import os
from flask import send_from_directory
#app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico', mimetype='image/vnd.microsoft.icon')
I ran into a very similar problem. I do not have the necessary points to add a comment to the answer yet. So I'll do it using "Your answer". For those who need a much more specific answer on how to use url_for () here is one way to do it.
<!-- Adding a favicon icon to Flask app -->
<!-- SEE: https://favicon.io/favicon-converter/-->
<link rel="shortcut icon"
href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="apple-touch-icon"
sizes="180x180"
href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon"
type="image/png"
sizes="180x180"
href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon"
type="image/png"
sizes="16x16"
href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="manifest"
href="site.webmanifest">
To generate the necessary files use the following link: https://favicon.io/favicon-converter/ All files were copied into the /static directory.
Any idea why github pages stoped loading css and images in subfolders, it works fine on the root of the site.
When i checked the source code of the page, i see this
"href="css/bootstrap-3.3.6/css/bootstrap.min.css">"
instead of
"href="/css/bootstrap-3.3.6/css/bootstrap.min.css">".
In my config file I have a line
baseurl : /
--> crowd42.github.io
Thanks
It should work the way it is baseurl : "/" if when loading assets you use that variable:
<link rel="stylesheet" href="{{site.baseurl}}css/main.css">
As it seems that you aren't using base urls, you can try forcing the root path with a slash at the beginning:
<link rel="stylesheet" href="/css/main.css">
Or including the absolute path:
<link rel="stylesheet" href="{{'css/main.css'|absolute_url}}">
with baseurl: "".
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
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.
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.
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 use
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >
And I have favicon in folder images.
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
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.
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.
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">
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">
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.
This works both locally and on github pages as well
On the jekyll website the instructions to deploy the website is the following,
simply run the jekyll command and copy the generated _site folder to the root
folder of your hosting account.
When I copy the _site folder to public_html on my university webserver, I do not get the same page that I was getting when I ran jekyll serve locally. In particular, it appears the css was missing.
Do I need to copy something else to deploy the website?
Your assets (css, js, image) are certainly missing some path.
Your _config.yml should content baseurl: /yoursite/path your site url is on the form : http://youruniv.edu/yoursite/path/.
And calling your assets should be done like this :
<link rel="stylesheet" href="{{ site.baseurl }}/css/styles.css">
<script type="text/javascript" src="{{ site.baseurl }}/assets/javascripts/scripts.js"></script>