Why is my HD logo blurry on my website but clear on mobile?

Hey i uploaded a Full HD Logo, but it is very blurry on the website in computer form.

But when i open the site on my phone, the quality is good.

Can someone help me fix this, ive tried so many things.

WEBSITE:

LiteHorizon.com

Password:

quawst

Hi @LiteHorizon ,

Can you share the blurry logo ?

It does look a bit blurry, I don’t know why that is. It says the intrinsic size is quite large, so it shouldn’t be. In my experience the best way to avoid loss of quality in logos is to upload them as SVGs and go into the code and change it to output the SVG. Unfortunately you can’t upload SVGs through the image picker in shopify so you have to go through Settings > Files and upload it there, then go into your header code and output the svg where the current logo is being output.

Hey @LiteHorizon .

Thanks for reaching out.

I appreciate that you have included your store URL as that is super helpful! Looking into the link that you have provided, I can definitely see that the logo is a bit blurry. It may displaying the way it is currently due to the Custom logo width that you can change from within the Theme Editor. I would suggest attempting to reduce the size of the logo, as this should allow the logo to display without the blur. I took a screenshot from my test store to show you the section I am referring to:

Let me know if that does the trick!

Hello @LiteHorizon were you able to fix this as I have the same problem? Thanks A