{"id":30308,"date":"2022-05-02T21:41:09","date_gmt":"2022-05-03T04:41:09","guid":{"rendered":"https:\/\/ericasneubauer.com\/?p=30308"},"modified":"2023-06-21T10:29:27","modified_gmt":"2023-06-21T17:29:27","slug":"how-to-fix-a-blurry-logo-on-your-website","status":"publish","type":"post","link":"https:\/\/ericasneubauer.com\/how-to-fix-a-blurry-logo-on-your-website\/","title":{"rendered":"How to fix a blurry logo on your website"},"content":{"rendered":"\n\n\t
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.<\/p>\n
An svg<\/a> is a vector file specifically for use on the web (svg stands for scalable vector graphic). (Remember my post about how great vector files<\/a> 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.<\/p>\n 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.<\/p>\n\n","protected":false},"excerpt":{"rendered":" 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 …<\/p>\nHere’s what you need to do to add an SVG logo to your Wordpress website<\/strong><\/h3>\n
\n
\nYou’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<\/a> for details.<\/em><\/li>\n
\n<\/strong>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).<\/em>
\n<\/strong>There are many free plugins in Wordpress repository\u00a0 to choose from- I recommend Safe SVG<\/a> 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.<\/li>\n
\nI 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.<\/li>\n
\nOr wherever your theme has the site logo setting. The customizer is found at Dashboard > Appearance > Customize, then usually under Site Identity.<\/li>\n<\/ol>\n