How to Upload a Logo Into Squarespace
SVG files wait 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 epitome 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 exist scaled to unlike sizes without losing quality, unlike a PNG or JPG file.
With PNG or JPG files you lot 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, y'all accept the choice of quality or compression. More pinch gives you a smaller file size, but you lot lose image quality. SVGs files are just lawmaking, which means they can have a smaller file size and a quicker load time.
Currently Squarespace but offers the pick to add a .png or .jpg logo file. Simply there is a workaround! Squarespace doesn't go far piece of cake, simply it is possible. Hither'due south how you can add an SVG logo to the Logo/Championship 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 instance we used the Brine template.
1. Add a Transparent PNG File
Hover over the folio title you want to add the SVG to and click edit. Add together 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 together text to the page. You lot 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-upwardly window, select the "File" tab
- Click Upload File to select the SVG file from your calculator. Yous can likewise elevate and drop the file into the Upload File area
- One time the file has uploaded click Save
- In the link editor re-create the URL to the SVG. It will expect like this /s/file-proper name.svg*
- Click apply
*In some cases yous may need to add together the full image URL. It will be much longer and look like this:
https://static1.squarespace.com/static/602d8c67675bb40d4f-1b1fcb/t/602e9574f59fb32c9e67195c/1613665652987/file-proper name.svg
You lot can discover this URL by clicking on the link created above and copying/pasting the full URL from the browser window.
At present that the SVG file has been uploaded and the URL has been created the linked text tin be removed.
three. Add Custom CSS
Back to the Domicile Menu, select Design, and then Custom CSS.
Insert the following code:
.Header-branding-logo {
background-repeat: no-repeat;
background-epitome: url(PASTE IMAGE URL HERE);
}
Annotation:If you take the logo set to display in the summit heart of the screen you may observe the logo appears slightly off-centre. To fix this you tin add this line to the code above:
background-position:centre;
The class or ID you are using equally a selector will vary based on the template you are using. For this instance we used the Brine template and the class is Header-branding-logo. You lot can notice the name of your logo's class or ID by right-clicking on the logo in your template and selecting Inspect Element.
4. Arrange Size
The SVG file may upload at smaller size. Y'all tin can arrange the width by going back to the Habitation Menu, select Design, and so Site Styles. Under Header: Branding at that place is a slider to increase the logo's width.
5. Add together Mobile Logo
On virtually templates Squarespace uses a different class or ID to display the logo on mobile. What'south frustrating about this is that Squarespace does non give you lot the pick to upload a mobile logo anywhere on the site and then there is no real way of knowing this… until you open up your website on mobile and realize your SVG logo is not at that place.
If y'all are using a different logo for mobile you'll need to echo Step 2 to upload this new logo. If you are using the same logo only add the mobile class or ID to the Custom CSS you created in Step 3. For the Alkali template the mobile form is .Mobile-bar-branding-logo.
.Mobile-bar-branding-logo {
background-repeat: no-repeat;
groundwork-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 volition look nifty on whatsoever device.
Source: https://kickpoint.ca/how-to-add-an-svg-logo-to-your-squarespace-website/
0 Response to "How to Upload a Logo Into Squarespace"
Post a Comment