I have made a web site, where the logo looks ok when I open it in my laptop browser. However, it doesn't show up in my iPhone or iPad browser. I tried Safari, Chrome, Brave, the same...
This the code in my html file:
<div class="header-logo logo animated" data-animate="fadeInDown" data-delay=".6">
<a href="./" class="logo-link">
<img class="logo-dark" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
<img class="logo-light" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
</a>
</div>
I have found another Stack Overflow question, the answer says it's because the image size, but I don't think so. My original size is only 1310x242 pixel. and I also tried to reduce the size to only 300x56. It still doesn't show.
Your help is highly appreciated!
okay, I sorted out myself.
It's the srcset, obviously it defines the set of images we will allow the browser to choose between, and what size each image is. So I forgot to update it to the image that I want in srcset.