Blurry Logo for Site Identity


#1

Hi there,
I’m struggling to get my logo crisp and sharp. This is despite trying different formats and resolution sizes. Any help would really be appreciated. My website is pencilshavingsbw.com.


#2

Hi there,

First, quality of your logo is very poor and you can see that by opening it in separate window and zooming browser a bit (you’ll see pixels around letters)

http://www.pencilshavingsbw.com/wp-content/uploads/2018/01/cropped-ps-logo-4.jpg

Second, it is smaller then header height so upon resizing it will become bury like when you are zooming it, so you need to save it with higher quality and to have dimensions of at least 300x87px https://www.screencast.com/t/GRrB9VnSO0w

Best Regards!


#3

Hi there,
Thanks so much for your quick response and your advice. I will definitely give it a go and fingers crossed that it will work.

Best,
t.


#4

Hi there,
So I think I followed your instructions correctly and it looks like the same issue. Thoughts?


#5

Hi again,

Image is still small https://www.screencast.com/t/31VsMKrT3J , but I think that it is getting bigger because of custom css code which you have probably inside Appearance > customize > Additional CSS field https://www.screencast.com/t/Kgta6RKf , so remove that code and you should have result like this https://www.screencast.com/t/OcEtlemTZgg

Best Regards!


#6

Hi there,
I cannot tell you how much I appreciate your guidance and time on this. The issue isn’t the size of the logo. In fact, I like it larger, but it’s the fact that the logo is still blurry. It was still that way even after removing the code. Arrrrgh! Any ideas?


#7

As I can see you have managed to load bigger logo by hiding default one and by loading it over pseudo element with this code https://www.screencast.com/t/oq5EojVcknl , and logo is sharp now. Good job.

All the Best!


#8

Thanks for all your help and guidance. You’ve been very kind.


#9

I was having the same problem and found this thread helpful but I thought I’d lay out exactly what the solution was, since it’s not obvious and took me a while to figure out.

I’m not sure why the default logo upload method in the Customize > Site Identity section results in such an awful blurry mess, but what you’re basically doing here is hiding the actual default logo set under Site Identity and then setting your logo image as the “background” for the a element that’s wrapped around it. Pretty janky workaround imho but it works :stuck_out_tongue:

Anyway I had to add the following to my style.css to get everything to look the way I wanted it to:

a.custom-logo-link:before {
	content: '';
	display: block;
	background: url(<url-to-my-logo-here>);
	height: 54px;
	background-repeat: no-repeat;
	background-size:contain;
	background-position: left; 
}

img.custom-logo {
	display: none;
}

The “background-position: left” for the custom-logo-link class was necessary to get my logo flush against the lefthand side (as my original blurry logo was) because otherwise the background gets centered by default. (took me forever to figure this out, I was messing with all kinds of margins and driving myself nuts)

“display:none” for the custom-logo class was necessary to hide the original logo set under Site Identity. I actually replaced this with a tiny 1x1 px blank image since I believe this image actually still gets loaded regardless of display style, so you’d be wasting some bandwidth loading two copies of your logo otherwise.

And you can’t just get rid of your site logo in the Site Identity, because then there will be no custom-logo-link element for you to set a background on.

Hope this helps someone who’s looking at all of the above and feeling confused.


#10

This was extremely helpful thank you so much. I also spend quite a bit of time troubleshooting. Your effort is much appreciated