Favicon with GitHub Pages

S

6

58

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?

Sulcate answered 27/1, 2016 at 12:32 Comment(3)

If a frameset is used, then the frameset itself must specify the favicon. You can not specify it from one of the inner frames. – Tuppeny 27/1, 2016 at 12:40

I'm not aware of a way to specify the favicon from the frameset with GitHub Pages – Sulcate 27/1, 2016 at 13:20

Try if any of this helps: #30552001 – Tuppeny 27/1, 2016 at 13:22

F

72

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.

Franciscka answered 23/3, 2017 at 3:22 Comment(1)

I also had this problem with my github pages (non jekyll). This answer worked for me in chrome, chromium and firefox. Thanks very much! – Slaver 27/4, 2017 at 1:25

T

13

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.

Theca answered 14/3, 2018 at 19:8 Comment(0)

N

13

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.

Norward answered 12/3, 2019 at 12:8 Comment(2)

ty, worked very well!!! What exactly ? symbol does? – Gratiana 4/12, 2020 at 18:3

@ÂngeloPolotto Np! I am not sure, I think it means "query", teamtreehouse.com/community/…. – Norward 9/12, 2020 at 21:29

P

4

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

Petes answered 5/7, 2021 at 12:29 Comment(0)

E

1

Also, make sure your ico or img is 16 x16 px. That was my issue also.

Eam answered 14/12, 2022 at 12:24 Comment(1)

Thanks for that! I was having this exact issue, as I used 32x32 px initially. When running locally all worked fine :p – Alameda 18/6 at 23:19

A

1

Just thought I would add to this...

If you are using a custom domain name, you can simply put the favicon.ico file in the root and browsers will find it. For example if your custom domain is something.domain.com the favicon will be in the root and available where browsers expect it at something.domain.com/favicon.ico.

However, if you're not using a custom domain, your repo content will be available at username.github.io/repo-name/. If you add a favicon to this repo the favicon is available at username.github.io/repo-name/favicon.ico, but the browser will look for it at in the root domain at username.github.io/favicon.ico.

But!! You can put a favicon at username.github.io/favicon.ico by creating a repo named username.github.io. If the repo has this exact name GitHub pages will automatically be turned on and the content available at username.github.io, kind of like your GitHub home page!

Then if you put a favicon here, all of your GitHub Pages (without custom domains) will automatically use this favicon.

https://github.com/orgs/community/discussions/63631

Note: This also works for organizations.

Aubreir answered 13/8, 2023 at 16:23 Comment(0)

Recommended topics

Hot tags