43

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?

Chris
  • 112,704
  • 77
  • 249
  • 231
Rokin
  • 1,697
  • 2
  • 23
  • 30
  • If a frameset is used, then the frameset itself must specify the favicon. You can not specify it from one of the inner frames. – CBroe Jan 27 '16 at 12:40
  • I'm not aware of a way to specify the favicon from the frameset with GitHub Pages – Rokin Jan 27 '16 at 13:20
  • 2
    Try if any of this helps: http://stackoverflow.com/questions/30551501/unable-to-set-favicon-using-jekyll-and-github-pages – CBroe Jan 27 '16 at 13:22

4 Answers4

53

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.

Dmitry Pleshkov
  • 989
  • 1
  • 12
  • 21
  • I also had this problem with my github pages (non jekyll). This answer worked for me in chrome, chromium and firefox. Thanks very much! – Matt Bruzek Apr 27 '17 at 01:25
10

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.

pme
  • 12,997
  • 2
  • 49
  • 80
8

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.

wooohooo
  • 454
  • 1
  • 4
  • 13
0
<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.

Zahin Uddin
  • 19
  • 3