Favicon not showing up no matter I try

Site name: javdu.ga (password = canaryclash8!)
github repo: GitHub - yavda1/gbajs: Game Boy Advance in the Browser

Hello! I am trying to add a favicon to my website but its not working. I have tried many different types of images but it doesn’t work.

@yavda1 Your favicon isn’t square.
screenshot-20230129-104651

Have you tried making one that is 32 x 32 pixels?

Just tried, still not working

@yavda1 Where are you working, because the favicon in the repo that you’ve linked hasn’t changed.

Edit:
Perhaps you’re talking about the /assets/favicon.png file that was added relatively recently?
That’s also not a square either, it’s 512 x 442

Ok, used an online converter and now its 512x512 and still not working

@yavda1 I see no change in your repository and can only advise on what I can see.

There are three favicons:

/favicon.ico
/assets/favicon.ico
/assets/favicon.png

You have the following in your html

<link rel="icon" type="image/png" href="assets/favicon.png"/>

None of the favicons in the repository have been updated recently and none of them are square.

Are you testing locally and advising that it doesn’t work there without having pushed to the repository?

Ok, I’ve made it square and now theres only the one in assets

@yavda1 Your index.html page structure is mangled.

You have…

<html>
  <body>
    ...
  </body>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Shift the contents from the top body into the lower one and remove it so that the head comes first.

type="image/ico" appears to work, but usually type="image/x-icon" is used for ico files.

If you are only going to use the ico file and are happy to have it in the root, (not within /assets/ folder), then you wouldn’t need to specify the link at all, since the default behaviour is for browsers to look for /favicon.ico