Menu
I'm hosting a few sites with GitHub Pages (User and Project Pages), but they are not displaying their favicons (in the browser).
<link rel="shortcut icon" type="image/png" href="/favicon.png">
Is the problem that GitHub displays the site with <frameset>? I know it's possible to display favicons (at least with Jekyll), but can I display a favicon on it's own?
571
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
SVG is a great way to reduce image size for images that aren't supposed to be bitmaps in the first place; for many logos the resulting file will be much smaller than a PNG. With just three PNG images in this minimum set, you can use advanced tools to optimize their size.
Yes, you can.
Put this into the head part of your webpage:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
It is important to not put the slash before the favicon.ico part. Put the favicon.ico file in your repository's home directory.
142
It also works with favicon.png
<head>
...
<link rel="shortcut icon" type="image/png" href="favicon.png">
</head>
The only problem is the slash / in "/favicon.png"
However this does not work for sub-pages!
The link should look like this - so you have the favicon on every page:
<link rel="shortcut icon" type="image/png"
href="{{ "/assets/images/favicon.png" | absolute_url }}">
The resolved URL looks like:
https://pme123.github.io/scala-adapters/assets/images/favicon.png
This expects the favicon.png in assets/images folder of your Jekyll project.
44
I used
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
as well as
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
or
<link rel="shortcut icon" type="image/x-icon" href="{{site.url}}/favicon.ico">
None of that worked. Finally I got it working by
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
in fact, seems that any of the above solution with an extra "?" at the end will do the trick.
29
<link rel="shortcut icon" type="image/x-icon" href="./Images/favicon.ico?">
look carefully i added a "?" at the end of the href. if you did something like this , then go to your github.io page and hard reload. You can use
ctrl/cmd + shift + r
to hard reload the page . That will clear your cache . After that I am hopeful that you will see the fav-icon.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
