How to Fix the Blurry Logo on Your WordPress Site

Is your logo blurry no matter what you try?

You’re not alone.

It’s a problem for tons of people.

And here’s why it’s still an issue…

Theme developers that submit themes on wordpress.org (like we do) have to use the built-in logo option in WordPress. But the built-in logo option doesn’t have a second retina version for the logo.

As a theme developer, I have no clue what your logo will look like, so I can’t create a pre-defined size without making things worse.

The result is a logo that only displays at standard definition which appears blurry on high resolution screens.

WordPress will need to add a retina version for logos in the Customizer, but for now, I have a simple workaround for you.

This customization works for all of our themes and should work for the majority of other WordPress themes too.

How to fix your pixelated logo

This solution is a little bit technical, but I’ve outlined the steps as clearly as I can.

What you’re going to do is upload a version of your logo that is 2x the normal size and then use CSS to shrink it down to regular size (I wrote the code already for you).

For example, if the logo image you have currently displaying is 300px wide, then you’ll upload a 600px wide version. When your image file is exactly twice as large as it shows up on your site, it displays perfectly sharp on high-resolution screens. If you look at the logo on this website right now, that’s essentially what I’m doing.

Now let’s get to the steps.

Find out what your ideal size is

The first step is to login to your site and open up the Live Customizer.

Once inside the Customizer, click on the Additional CSS section at the bottom.

Next, copy and paste this code into the section:

.custom-logo,
.site-header .logo {
  max-width: 100% !important;
  width: 300px !important;
  height: auto !important;
}

You’ll see your logo update instantly to be 300px wide. Ignore whether it’s blurry or not right now – we’ll fix that in the next step.

In the CSS, change the “300px” value until your logo displays at the size you want. Again, don’t worry about blurriness, just edit it until it takes up the right amount of space on the site.

I know this might be your first time editing code, so here’s a quick example of how the code would look if you decided your logo looks best when 450 pixels wide:

.custom-logo,
.site-header .logo {
  max-width: 100% !important;
  width: 450px !important;
  height: auto !important;
}

Make sense?

Once the logo takes up the right amount of space in the header, you can publish your changes or save it as a draft for now.

The next step is to resize the image file itself.

Resize your image

For your logo to display sharp on your site, you’ll need a version that is exactly twice as big as the size you entered in the CSS.

For example, if the CSS code makes the logo 450px wide, you’ll want a copy of your logo image that is 900px wide.

If you don’t have a large enough version of your image file, you’ll need to get in touch with your logo designer or get access to the original design document to export a large enough size.

Otherwise, if you only have a 600px wide original copy then when you stretch it to 900px then the image is going to be blurry even when you view it on your computer.

Once you’ve got a 2x sized version of the image, you’re ready for the final step.

Upload your new image

Inside the Customizer, locate the logo upload option. For most themes, it will be inside the Site Identity section.

Upload your new 2x version of the logo and it will appear nice and sharp on the site.

To summarize, you change the logo size with CSS until it fills the right amount of space in the header. Then you upload an image that is twice that size, and it will look sharp on high resolution screens.

This is essentially what retina support for images on the web does behind-the-scenes and this is a simple way to implement it yourself.

That’s all there is to it!

Conclusion

It’s a shame that WordPress doesn’t have a good way to display high resolution logos, but the workaround is easy enough.

You can alternatively upload an SVG version of your logo, but this also requires adding SVG support.

While you may not know anything about CSS, the steps here mainly requiring copying & pasting, and I hope that you enjoyed picking up some new technical skills by following this tutorial.

If you want to learn more about using CSS to customize your site, check out this tutorial:

How to Customize Your Theme with Custom CSS

And if this article helped you out today, please consider sharing it with someone else before you leave.

Thanks for reading!