Re: How To Fix Blurry Header Logo -- Custom Code (Dawn Theme)

How To Fix Blurry Header Logo -- Custom Code (Dawn Theme)

11 0 1

Hey Guys,


So I've encountered an issue with my mobile logo's image quality on my Shopify store. Despite using a high-resolution image, the logo appears pixelated on mobile devices. I've tried adjusting the img_url filter size and ensured the CSS isn't stretching the image beyond its natural dimensions, but the problem persists.

Here are the details:

  • The logo is clear on desktop.
  • The issue only appears on mobile, regardless of the device or browser used.
  • I'm using an image with sufficient resolution for Retina displays. (image size 500 x 300px)



This is the code snippet for the logo in my header.liquid file:





And the corresponding CSS:


.header-logo-mobile { display: block; /* shown on mobile */
margin: 0 auto; /* centers the logo */
max-width: 100%; /* ensures the logo is not wider than its container */
height: auto; /* maintains aspect ratio */ }

Any insights on why this could be happening or further steps I could take to resolve this issue would be greatly appreciated. Thank you in advance for your help!

This is the reason google is giving me btw: 




Replies 4 (4)

Shopify Expert
3477 463 527

Hi @Aromidy ,

It's possible that your photos were compressed and lost quality when uploaded to Shopify. To ensure that your logo maintains clarity and sharpness, you can try these steps:

1. Prepare a high-quality photo: Make sure you have a high-quality version of your logo image. Ideally, it should be in vector format (e.g. SVG) or high-resolution format (e.g. PNG).

2. Optimize photos for the web: Before uploading your logo, optimize it for the web to balance image quality and file size. You can use online photo optimization tools like TinyPNG ( or Squoosh ( to compress and optimize photos while preserving image quality.
You can refer to here: to optimize the photos you upload.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via

BSS Commerce - Full-service eCommerce Agency
11 0 1

I'll try it out. Thanks for the advice BSS-Commerce!

1 0 1

HI Aromidy,


I was suffering from the same problem. The same logo was used: desktop FINE, mobile: blury or missshaped.

SOLUTION: just use a .svg file for mobile, it worked. before I was using PNG in every size, and it didnt.

8 0 3

Thank godddd you posted this! It's been sending me mental for months and finally trying as .svg fixed it! Thank you!