by Sarah Gardener

How to Add an SVG Logo to Your Squarespace Website

SVG files look sharp at all screen resolutions, have super small file sizes, and can be edited and modified using code. These files are commonly used for website logos to keep the image crisp no matter what device or browser a person is viewing your website on.

What an SVG is & Why You Should be Using it

Scalable Vector Graphics (SVG) are web-friendly vector images. Files in this format use an XML-based text format to describe how the image should appear. Because text is used to describe the graphic, a SVG file can be scaled to different sizes without losing quality, unlike a PNG or JPG file.

PNG file (left) vs. SVG file (right)

With PNG or JPG files you are restricted to pixels. You would use a PNG file when you require transparency in your images. Transparency in an image requires a large file size. The larger the file size, the slower the graphic is to load. When working with JPG files, you have the choice of quality or compression. More compression gives you a smaller file size, but you lose image quality. SVGs files are just code, which means they can have a smaller file size and a quicker load time.

Currently Squarespace only offers the option to add a .png or .jpg logo file. But there is a workaround! Squarespace doesn’t make it easy, but it is possible. Here’s how you can add an SVG logo to the Logo/Title section of your Squarespace site.

How to Add an SVG Logo to Logo/Title Section of Your Squarespace Website

  • Add a Transparent Logo

Hover over the page title you want to add the SVG to and click edit. Add a transparent logo that is the same size as your .png or .jpg logo file.

  • Create an Unlisted Page

In the Home Menu, click Pages, then click the + icon to add a new page.

Enter a page title in the box. We suggest naming this page SVG or something equally descriptive so you don’t confuse this page with any other pages you have already created.

In the Pages panel, hover over the page title, then click the gear icon next to the title. Uncheck Enabled, click Confirm, and then click Save. This ensures your page will not appear on your live site and will not be indexed by search engines.

Begin editing the unlisted SVG page using the blank starter layout.

  • Upload SVG to Unlisted Page

Select “edit” to start adding text to this page. We recommend using text that will help you identify the logo you are uploading (like SVG logo or SVG link).

Highlight the text and select the “add a link” option. From the pop-up window, select the “Files” option and upload the .svg.

Once the file has uploaded, select “Open in a New Window” and save this section. You can get the URL to the SVG by clicking on the link (this will open in a new tab).

Copy the URL.

  • Adding Custom CSS

Back to the Home Menu, select Design and then Custom CSS.

Insert the following code:

.logo-image {
background-repeat: no-repeat;
background-image: url( PASTE IMAGE URL HERE );
}

The class or ID you are using as a selector will vary based on the template you are using. For this example we used the Ready template. You can find the name of your logo’s class or ID by right-clicking on the logo in your template and selecting Inspect Element.

Now your SVG logo will appear in the header of your website! You can rest easy knowing that your logo will look great on any device.

Comments
Kate says:

This looks amazing in desktop and on tablets but when my site is in mobile mode the logo disappears, appearing only as the blank .png I uploaded. Is there a workaround for this or am I missing something?

Sarah Gardener says:

Hi Kate, Yes, depending on the template you are using, you will need to add custom code for a mobile logo. Frustratingly Squarespace doesn’t allow users to add a mobile logo but the template will change to a mobile logo (normally just a smaller version of the desktop version) at a certain screen size. If you want to email me at [email protected] I can help you with a workaround for your website.

Cheers, Sarah

Hernán says:

Hi Sarah!
Thanks you so much for your help! I would like to know if there´s a way to switch between different logos on different pages for my squarespace page built upon “Alex” template. It would be the same exact image, but in different colors. If you could help me with that i would be grateful!

Sarah Gardener says:

Hi Hernán,

Yes this can be done! The best way to do this will depend on the logo you are using and how many different colours you’d like to use. We can definitely help you out! Can you email me at [email protected] with your website link and the different versions of your logo?

Cheers,
Sarah

Suzanne Latter says:

Hey Sarah,

Thanks for this tutorial 🙂

I’ve successfully managed to get this working for my logo, but also want to include the logo in my footer as an SVG. Do you know how I could do this here too?

Thanks,
Suz

Sarah Gardener says:

Hi Suz,

Absolutely you can add the SVG logo to your footer. The process will be the same! Which template are you using? If you want to email me at [email protected] I can help you with a solution for your specific template.

Cheers,
Sarah

Annie says:

Hi Sarah,
Thanks for this post, very helpful!
I’m not sure whether you can help me, I have used this method for a logo in the footer:
https://clownfish-maracas-6wwx.squarespace.com

It works perfectly.

However, I am having an issue on the About page. The logo loads first and is the full width of the screen before the other image content loads and pushes it down to the footer/ resizes. Do you have an idea how to stop it from doing this?

Thanks,
Annie 🙂

Sarah Gardener says:

Hi Annie,

Glad this post helped. Your website site is looking great!

I am seeing the full page logo on the About page. This issue is the large image on the page (cute pup btw). It’s > 5MB which is taking the page is taking a long time to load –  around 7 seconds to fully load. Reducing the size of this image should speed up the page load significantly. An ideal image size would be < 1MB We use photoshop to crop images and reduce file size. We also run images through a program like imageOptim after it has been cropped to further reduce the file size. You can also run your SVGs through SVGOMG to optimize the SVG and reduce its file size.

I also noticed that the URL to your About page is /about-1. If you delete the first About page you created that uses the /about URL slug you can change the URL slug on /about-1 to /about.

Please feel free to email me at [email protected] if you have any questions or need any more help!

Cheers,
Sarah

Shane says:

I think I noticed one shortcoming of this which is disappointing. It doesn’t show on the checkout page, and AFAIK, that page is locked down too much to inject the code. Hopefully, I’m wrong?

Sarah Gardener says:

Hi Shane,

Can you email me ([email protected]) the link to your website? We can take a look.

Cheers,
Sarah

Leave a Comment

Your email address will not be published.