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.com 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.com/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.com/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;
}