Favicon with GitHub Pages

html github favicon github-pages

20,247

Solution 1

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.

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.

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">

 <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.

20,247

Author by

Responsible red-eyed reinventor

Updated on July 21, 2022

Rokin almost 2 years
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?
Matt Bruzek about 7 years

I also had this problem with my github pages (non jekyll). This answer worked for me in chrome, chromium and firefox. Thanks very much!
Ângelo Polotto over 3 years

ty, worked very well!!! What exactly ? symbol does?
wooohooo over 3 years

@ÂngeloPolotto Np! I am not sure, I think it means "query", teamtreehouse.com/community/….