My website's favicon that is seen in tabs of chrome disappears when i use the following jQuery. Removing this script from head makes the icon visible. But why a seemingly simple and unrelated code causes it.

My code given below to add a fading preload till the content of page load work perfectly. But the Favicon doesn't load. And checking through inspect element shows that the icon is very loaded also but doesn't show up.

Site url: My Javascript has been inserted directly into HTML in the head of the page the code is given, and i can assure that it doesn't have any error logs in console

<script src=".5.2/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $(".milyin-load").fadeOut("slow");;
    });
</script> 
<div class="milyin-load" >
<img class="milyin-load-image" align="center" src=".png" > </img>
<span class="milyin-load-text" align="center">Milyin </span>
</div>

CSS for same follows:

.milyin-load {
    height:100vh; 
    width:100vw;
    background:#fff !Important;
}
.milyin-load-image {
    max-width:400px;
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    max-height:40vh;
}
.milyin-load-text{
    position:fixed; 
    top:80vh; 
    left:40vw; 
    right:40vw; 
    font-size:24px;
    margin:auto;

}

My website's favicon that is seen in tabs of chrome disappears when i use the following jQuery. Removing this script from head makes the icon visible. But why a seemingly simple and unrelated code causes it.

My code given below to add a fading preload till the content of page load work perfectly. But the Favicon doesn't load. And checking through inspect element shows that the icon is very loaded also but doesn't show up.

Site url: https://milyin My Javascript has been inserted directly into HTML in the head of the page the code is given, and i can assure that it doesn't have any error logs in console

<script src="http://ajax.googleapis/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $(".milyin-load").fadeOut("slow");;
    });
</script> 
<div class="milyin-load" >
<img class="milyin-load-image" align="center" src="https://milyin/wp-content/uploads/2019/03/Milyin-5-e1552211907974.png" > </img>
<span class="milyin-load-text" align="center">Milyin </span>
</div>

CSS for same follows:

.milyin-load {
    height:100vh; 
    width:100vw;
    background:#fff !Important;
}
.milyin-load-image {
    max-width:400px;
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    max-height:40vh;
}
.milyin-load-text{
    position:fixed; 
    top:80vh; 
    left:40vw; 
    right:40vw; 
    font-size:24px;
    margin:auto;

}

• jquery
• css
• javascript
• html
• icon

• No repro. Favicon loads for me. Win 10x64 Chrome 73. Probably just a local cache issue on your end. – Samuel Liew Commented Apr 1, 2019 at 0:20

1 Answer 1

The problem was the positioning of code, the javascript should be placed inside the DIV tag rather than above it. This makes the thing work.