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? I’ll re-post in my stories for anyone who missed it) This has the same advantages as a vector file in print- basically, you are guaranteed perfect resolution no matter what browser or device you use.

Here’s what you need to do

  1. First, 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 (see my reel)- just select “SVG” as the file type when you click on download.
  2. Second, install a plugin to enable SVGs
    There are many to choose from, such as SVG Support and Safe SVG. Once you’ve installed, don’t forget to activate it.
  3. Third- upload your SVG
    I find that SVGS uploaded directly to the media library work best.
  4. Fourth- Replace your logo in the Customizer or wherever your theme has the site logo setting

That’s it! Excited to see more great looking, crystal clear logos out there!

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