How to fix a blurry logo on your website

This is a simple change that can have a HUGE impact on your visuals. Even if the rest of your website is completely awesome, a blurry logo is going to make a bad first impression and harkens back to the days before high definition screens. If you’ve ever struggled with knowing the exact resolution to save your logo file as and/or notice that it still looks blurry no matter how big you make it, then you're probably still using either a png or a jpeg file. And now's the time to ditch those pixel based files for a crystal clear looking svg.

Wait, a what?

An svg is a vector file specifically for use on the web (svg stands for scalable vector graphic). (Remember my post about how great vector files are? Good news- they can be used on websites too!) This has the same advantages as a vector file in print- they are infinitely scalable, with no pixel edges, ever. Basically, you are guaranteed perfect resolution no matter what browser or device you use.

Here’s what you need to do to add an SVG logo to your Wordpress website

  1. Get your logo in an svg format
    You’ll need to start with a vector format to begin with (depending on what programs you have, AI/EPS etc), then re-save it as an SVG. In Canva, this is easy to do - just select “SVG” as the file type when you click on download. Only have your logo in a jpeg or png? I offer a vectorization service to help clients convert their pixel-based logos to vectors, contact me for details.
  2. Install a plugin to enable SVGs
    This advice applies if your builder doesn't natively support SVGs, which is most of them (Bricks Builder gets a trophy for its native support of SVGs).
    There are many free plugins in Wordpress repository  to choose from- I recommend Safe SVG because it also "sanitizes" the file to make sure its stripped of vulnerabilities that hackers might exploit. Once you’ve installed, don’t forget to activate it.
  3. Upload your SVG
    I find that SVGs uploaded directly to the media library work best. You may get a "file type not supported" error if you try to upload it via Gutenberg or your page builder.
  4.  Replace your logo in the Customizer
    Or wherever your theme has the site logo setting. The customizer is found at Dashboard > Appearance > Customize, then usually under Site Identity.

That’s it! Excited to see more great looking, crystal clear logos out there on the web. Once you start seeing how good a vector logo looks, you won't be able to stop seeing all the blurry ones that bring down an otherwise great looking site.

Ready to get an incredible new brand identity? Book a call at a time to suit your schedule

If you're still using a logo and branding that you DIYed and know its time to upgrade, let's chat! I've helped dozens of clients to hone in on the perfect all-around look that will attract the right customers.

Erica Neubauer uses Accessibility Checker to monitor our website's accessibility.

Scroll to Top
Scroll to Top