Why is my logo still fuzzy?

[Taylor_Naff]

Hi,

I'm using the Trademark theme and I'm following all the guidelines, but my logo still appears fuzzy. I have a perfectly good logo that looks great at any size. Trademark asks for a 200x 60px .png file. I've uploaded the logo multiple times in multiple formats. I've even tried uploading it as a Shopify file instead of uploading it through my theme, but that didn't work. So I decided to upload my logo in my product images, and it shows up perfectly clear there!! 

If anybody has any new ideas I would be very grateful.

Thank you!

[Stylesupplier]

This issue you should ask your trademark theme owner. They can help you.

[LukaszWiktor]

Hi Taylor,

I've checked your logo and in fact it's fuzzy in Chrome but sharp in Firefox.
One way to fix it in Chrome is to set CSS property image-rednering: pixelated

HTH,
Lukasz

[JoesIdeas]

Try using a vector (.svg) instead of png.

Vector graphics are infinitely scalable without loss of resolution, and double bonus they're lighter in file weight too.

[JustLotus]

It seems Shopify won't allow me to upload any vector files. :(

[G_Nerd]

Did you find a solution to the blurry logo issue?

[JustLotus]

I didn't find a solution but I did learn that the issue depends on the template I use. 

[sitesmith]

Just browsing through these threads on logos and wonder which template you found that worked... 

[MAISONHIJAB]

Hello!

Is there any chance for Shopify, to come with an answer that really solves the problem of the blurry logo. So many people seem to have this problem, causing to really stop with Shopify. And I have been researching myself for a while now, to find a solution. But it seems that Shopify doesn't respond to it. 

I tried all diff sizes and my logo remains blurry (maisonhijab.com). Can someone please help?

[XCEPTION]

I did a workaround for it.
I am new to Shopify and I am using debutify theme. I am not sure if the code looks exactly the same for all themes.
One more thing is I have used a transparent background logos everywhere.
Steps:

• Go to Online Store > Customize > Theme Actions > Edit Code
• In the left-hand side folder structure, you can see the "Add new asset" link in the Assets folder/directory.
• Click on it and add your logo image(Keep its name easy for reference). In my case, it is "fleezy_logo_transparent.png" and "fleezy_logo_transparent_light.png"
• Also, keep logos uploaded in the theme customization section in the header section, where you usually do. This can be avoided but then we will have to tweak the code more in that case.
• Now open the file Sections > header.liquid
• Find the code that starts with

{% if section.settings.inverted_logo and template.name......​

• and ends with

......{% else %}
        <span class="default-logo">{{ shop.name }}</span>
        <span class="mobile-logo">{{ shop.name }}</span>
    {% endif %}​

• If code does not looks exactly the same as above then search for <img class="logo.... Mostly you will get a start of it. 
• Replace the whole code with below

{% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %}
        <img class="logo inverted-logo" src="{{ 'fleezy_logo_transparent_light.png' | asset_img_url : 'x200' }}"
        srcset="{{ 'fleezy_logo_transparent_light.png' | asset_img_url : 'x200' }} 1x, {{ 'fleezy_logo_transparent_light.png' | asset_img_url : 'x200' }} 2x"
        alt="{{ 'fleezy' | default: shop.name }}"
        itemprop="logo">
    {% else %}
        <span class="inverted-logo">{{ shop.name }}</span> 
    {% endif %}

    {% if section.settings.default_logo %}
        <img class="logo default-logo" src="{{ 'fleezy_logo_transparent.png' | asset_img_url : 'x200' }}"
        srcset="{{ 'fleezy_logo_transparent.png' | asset_img_url : 'x200' }} 1x, {{ 'fleezy_logo_transparent.png' | asset_img_url : 'x200' }} 2x"
        alt="{{ 'fleezy' | default: shop.name }}"
        itemprop="logo">
    
        <img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: 'x80' }}"
        srcset="{{ 'fleezy_logo_transparent.png' | asset_img_url: 'x80' }} 1x, {{ 'fleezy_logo_transparent.png' | asset_img_url: 'x80', scale: 2 }} 2x"
        alt="{{ 'fleezy'| default: shop.name }}"
        itemprop="logo">
    {% else %}
        <span class="default-logo">{{ shop.name }}</span>
        <span class="mobile-logo">{{ shop.name }}</span>
    {% endif %}​

• Note that where I have used 'fleezy_logo_transparent_light.png' is the one which appears on sticky bar that scrolls and 'fleezy_logo_transparent.png' is the default/dark logo.
• The other thing to notice is the sizes(x80, x200). You can adjust them as per your requirements on web and mobile. In my case x80 is for mobile and x200 is for desktop

I hope this helps