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

[meerkat]

Had the same issue using WeTheme's Flow theme, but found a hacky workaround.

First, I removed the logo image from the template customizer. That causes the template to default to your site name in text where the logo would go. Then I used Chrome inspector to find class name for element where that text appears. for me it was called site-header__logo. Then in global settings, I uploaded a .svg version of my logo to the "Files" section and copied the image URL. Next went in to CSS, (for Flow theme it was called timber.scss.liquid) and there I added code to set the opacity to 0 for the element using the class I just grabbed from the inspector, which was .site-header__logo-link. This made the site name transparent and no longer visible on the page. Finally, I went back in the Chrome inspector and found the parent element for the previous element. It was .site-header__logo (good ol' BEM) and then back in CSS, added in my .svg file as a background image... Here's what my CSS looked like:

.site-header__logo {
width: 130px;
height: 53px;
background-image: url("url for svg file goes here");
background-size: cover;

}

.site-header__logo-link{
opacity: 0;
}

[sophiab]

hi - i did this and it worked, but it won't say - how do i save it in CSS?

[TreeBuddees]

I am having the same problem. Can anyone direct me to where Shopify has addressed this, if they have even acknowledged it?

[barneyanddude]

same issue, been having it for years, I can't believe this hasn't been fixed within Shopify. I'm using simple theme at the moment.

[MullerMan]

Yes, this answer from XCEPTION worked for me. Simply added 'x200' to my {{ section.settings.nav-logo | img_url : 'x200' }}. Thank you!