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.
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
These instructions may vary depending on the template your website is using. For this example we used the Brine template.
1. Add a Transparent PNG File
Hover over the page title you want to add the SVG to and click edit. Add a transparent PNG that is the same size as your .png or .jpg logo file.
2. Upload SVG
Upload the SVG file using the link editor.
- On any page, select “edit” and add text to the page. You can remove this text later
- Highlight the text and select the link icon from the toolbar
- Click the gear icon in the URL box
- From the pop-up window, select the “File” tab
- Click Upload File to select the SVG file from your computer. You can also drag and drop the file into the Upload File area
- Once the file has uploaded click Save
- In the link editor copy the URL to the SVG. It will look like this /s/file-name.svg*
- Click apply
*In some cases you may need to add the full image URL. It will be much longer and look like this:
You can find this URL by clicking on the link created above and copying/pasting the full URL from the browser window.
Now that the SVG file has been uploaded and the URL has been created the linked text can be removed.
3. Add Custom CSS
Back to the Home Menu, select Design, and then Custom CSS.
Insert the following code:
background-image: url(PASTE IMAGE URL HERE);
Note: If you have the logo set to display in the top centre of the screen you may notice the logo appears slightly off-centre. To fix this you can add this line to the code above:
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 Brine template and the class is Header-branding-logo. 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.
4. Adjust Size
The SVG file may upload at smaller size. You can adjust the width by going back to the Home Menu, select Design, and then Site Styles. Under Header: Branding there is a slider to increase the logo’s width.
5. Add Mobile Logo
On most templates Squarespace uses a different class or ID to display the logo on mobile. What’s frustrating about this is that Squarespace does not give you the option to upload a mobile logo anywhere on the site so there is no real way of knowing this… until you open your website on mobile and realize your SVG logo is not there.
If you are using a different logo for mobile you’ll need to repeat Step 2 to upload this new logo. If you are using the same logo simply add the mobile class or ID to the Custom CSS you created in Step 3. For the Brine template the mobile class is .Mobile-bar-branding-logo.
background-image: url(PASTE IMAGE URL HERE);
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.
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?
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.
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!
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?
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?
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.
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:
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?
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!
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?
Can you email me (s[email protected]) the link to your website? We can take a look.
Hey All, I just thought I’d share my experience with a V7.1 template – The class for the logo has changed to:
…at least on the template I am using!
Thanks for the heads up Frank!
Thank you! Sadly my logo displays double (you will see two logo’s (SVG and PNG). Could you please help me?
Hi Pascal, Did you upload a transparent PNG file to Logo & Title section in Squarespace? Can you please email me with a link to your website ([email protected]). Happy to take a look!
I’ve been trying to get this to work on the Bedford template, to no avail – do you know if it’s possible on other templates with this code?
Thanks for all your work and help so far!
Yes, it is possible to use this code on other Squarespace templates though sometimes the code may need to be adjusted slightly. Can you email me at [email protected]? We can take a look at your site and make the necessary adjustments to get this working!
Help! I used this method to put my SVG logo onto my Squarespace site but as I navigate through my site the logo keeps disappearing until I go back to my Custom CSS editor. Has this happened to anyone else?
That can happen sometimes while you are editing it but it should still be visible on the live/demo site. Can you email me at [email protected]? I’ll take a look at your site and see what the issue is.
Same issue. It just shows up when I’m editing the CSS. if I navigate in the demo it disappears, and in the live version, it doesn’t show. But if I go back to the CSS Editor and click o the code it shows up again
Can you email me at [email protected] with a link to your Squarespace site? Every template requires slightly different code. I can take a look at your specific template and help you out!
My SVG logo appears on my edit/demo page, but when I go to another window and go to my website, it doesn’t show up. Is there a way to solve this?
Can you email me, [email protected], the link to your website? I can take a look and see what’s going on.
I got this to work by re-reading the instructions to upload a completely TRANSPARENT image as a placeholder. What i had done was upload my logo with a transparent background! Small error but fixed the problem. Great code Sarah.
In 7.1 I needed to alter the CSS colour theme to display one logo in one theme and one in another.
Hi Yvette, So glad to hear this post and code helped you out!
Thanks for this.
Unfortunately I am only seeing the logo on some pages and appears after the rest of the content loads. On Safari it doesn’t work at all. Any advice?
Can you email me at [email protected] with a link to your Squarespace site? Every template may require slightly different code. I can take a look at your specific one!
I am new to Squarespace and this was incredibly helpful! Thank you, I really appreciate it!
I am using the Cami template and this has worked great with the change from “branding” to “title.” Unfortunately, my mobile SVG logo cannot be used to link back to my home page now. Might you be able to help me with this issue?
Thank you! I’m glad that the article was helpful to you. Can you send me an email at [email protected] with your site URL? I’ll take a look and see what we can do to help!
Thank you so much for this.
I got it to work on Squarespace 7.1 after some trial and error.
I had to use the complete url for the .svg file.
It wasn’t working but then I made the dimensions of the .svg logo file and the completely transparent .png file the same. I also found that I had to use smaller dimensions for both files. I went with 200 x 40 px for both files.
Hi Daniel, Thanks for the update on your fix! Glad that you got it working.
This isn’t working at all for me. I see most of the comments were left back in May. Has Squarespace stopped this from being done now?
It’s been a minute since we’ve done this. Do you mind sending a link to your site to [email protected]? We can take a look to see how we can help!
It is not a logo, but i’m simply trying to insert an .svg image in my home page with Squarespace and i didn’t find any solution for now.
Can you help me?
Of course! Can you send me an email ([email protected]) with a link to your site? We can take a look to see how we can help.