htmlfaviconico

Why does my website's icon work on Firefox but Chrome, Opera GX, Brave do not display it?


I've tried many things, favicon.ico is 16x16 I've tried png images but no luck there, funny thing is that my website used to have the same looking icon but I changed a lot of stuff there and now it just does not work.

HTML:

<DOCTYPE>
<html lang="pl">
<head>
<link href="icon/favicon.ico" rel="shortcut icon" type="image/x-icon"/> 
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>REMOVED</title>


<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    
<!-- <link rel="icon" type="image/vnd.microsoft.icon" href="icon/icon01.ico"> -->
<div class= "pages"><h2 class = "banner">   <a href="TFT/">TFT</a></h1>
    <h2 class="banner"><a href="japanese/">Japanese reading practice</a> </h1>
    </head>
    <body>
</div>

    <p>My main programming language - Python</p>
    <p>I'm also familiar with C++,C, HTML, CSS and Javascript</p>
    <p>I have a good understanding of Microsoft Access, Excel </p>
    <p>I am open to job offers</p>
        
    <script>
        function copyEvent(id)
        {
            var str = document.getElementById(id);
            window.getSelection().selectAllChildren(str);
            document.execCommand("Copy")
        }
    </script>
    
    <h2>Contact me:</h2><p class="copy" id="p-copy">REMOVED</p><button class = "copy" type="button" onclick="copyEvent('copy')">Copy</button>
    
<h2>Find me:  </h2>
<div class="icons">
  <figure><a href="mailto:REMOVED" id="REMOVED">
    <img src="images/email.png" lang="en-GB"><figcaption class="email"></figcaption>        </a>
</a></figure>
    <figure><a href="https://github.com/Jirafey">
      <img src="images/github.png" lang="en-GB">
    </a></figure>
    <figure><a href="REMOVED">
        <img src="images/linkedin.png" lang="en-GB">
      </a></figure>
      <figure><a href="https://jirafey.itch.io/">
        <img src="images/itch.png" lang="en-GB">
      </a></figure>
  </div>
    <p><a href = "REMOVED"> </a> </p>
    <h2>Resume:  </h2>
    <iframe class="pdf"src="REMOVED" width="50%" height="750px">
    </iframe>
</body>
</html>

CSS:

body{
    background-color: black;
    color: #ddd;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    
}
.copy{
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
}
p{  
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
}

h2{
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 1vh;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}

.pdf{
        justify-content: center;
        display: flex;
        align-items: center;
        margin: auto;
        height: 60%;
        width: 30%;
}
.banner{
    display: inline;
    justify-content: inline;
    align-items: inline;
    margin-left: 1vw;
    margin-right: 1vw;
    color: rgb(199, 206, 206);
    
    font-family: "Avenir LT Std", sans-serif;
}

.pages{
    background-color: rgb(142, 142, 142);
    text-align: center;
}
.copy{

    border-radius: 10px;
    padding: 3px;
    align-items: flex;

}
a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
    text-align: center;
}   

.icons{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    margin: 0;
  }
figure{
    margin: 1vw;
}
.icons > figure > a > img {
    filter: grayscale(1);
    vertical-align: middle;
    width: 2em;
    margin: 0;  
  }

Solution

  • I never encountered it, but i always have fall backs in the system.

    <link  rel='apple-touch-icon' sizes='180x180' href='theme/ico/apple-touch-icon.png'/>
    <link  rel='icon' type='image/png' sizes='32x32' href='theme/ico/favicon-32x32.png'/>
    <link  rel='icon' type='image/png' sizes='16x16' href='theme/ico/favicon-16x16.png'/>
    <link  rel='manifest' type='image/x-icon' href='theme/ico/site.webmanifest'/>
    

    As a side note, the safari browsers handles things different, thus the extra apple touch icon, plus it looks better when you save the website on an Iphone / Ipad or any other Apple device that allows it as a shortcut.

    I have icons in several sizes so i do have a fall back, in the worst case, i refer back to the manifest, which is pretty much a json string that helps with icons on android and chrome as far as i know.

    as example.

    {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}