Search code examples
htmlgithub-pagesfavicon

Favicon not showing on main branch index.html


My project is a portfolio site hosted on GitHub Pages with all images hosted on my University server. address is säll.com

The problem I have is that in my main branch, I have an index.html file with this code for the favicon

<link rel="icon" type="image/png" href="https://people.kth.se/~dsall/favicon.png?"/>

As you can see if you go to säll.com, it's not showing up. However, on for example säll.com/alunskar I have the exact same code and it shows up.

What am I doing wrong? I tried the thing with adding a question mark, the x-ico thing.

    <p><html>

<head>
         
         <link rel="icon" type="image/png" href="https://people.kth.se/~dsall/favicon.png?"/>

</head>
<body>

<p>hey</p>

</body>
</html>

Solution

  • Your <link rel='icon' ...> tag appears in the <body> element of the linked site.

    While some <link> tags can appear here and be considered syntactically valid, the icon relationship must appear in the <head>.

    MDN has a helpful summary on their page for <link>:

    A <link> element can occur either in the <head> or <body> element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head>.

    See the relevant HTML spec; note that icon is not "body-ok".