How to add an SVG logo to your Squarespace

To add an SVG logo to your Squarespace site you need:

1. Add a PNG version of the logo, it must have the same dimensions as the SVG logo
2. Add the code below to your Custom CSS. Replace the default SVG with your logo @site-logo-svg: escape(~'ADD YOUR SVG HERE')

/* Replace the site logo with the SVG version */
@site-logo-svg: escape(~'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><rect x="0" y="0" width="25" height="25" /></svg>');

[data-content-field="site-title"] {
  background: url('data:image/svg+xml;charset=utf-8,@{site-logo-svg}') no-repeat 50%;
  background-size: contain;
  img {
    visibility: hidden;
  }
}