How to Add a Logo to Your Squarespace Website - Desktop and Mobile
More of a visual learner?
WATCH THE VIDEO BELOW.
Grab my free 3 day video email course: FINDING YOUR BRAND COLOURS
Follow along this easy Squarepace tutorial on how to add and customise your business logo for both desktop and mobile.
Edit Site Header
To edit the site header you need to start from the very first page that you land on when clicking through to your website in Squarespace. It should look something similar to the above.
However editing a logo is not done through the navigation menu but rather through the edit botton that you can see in the top left of the website preview. (Refer to the screenshot above). You can remember this because it is conveniently located directly above where the logo of a website usually sits in the top left hand corner!
Once you have clicked through to edit, hover your cursor over the top of the website preview and the option to ‘Edit Site Header’ will appear. (Refer to screenshot below)
Uploading Your Logo
Clicking on ‘Edit Site Header’ will make a pop up screen appear with options. At the top of this option list click ‘Site Title & Logo’.
You will then proceed to a customisable list where you can add your logo and customise it’s height on both your desktop and mobile website.
You might have noticed that the site title will appear automatically as a typography logo on your website if you do not yet have a logo uploaded.
You can keep this if you do in fact have a typography logo, or you can upload a logo from your computer.
Test out the logo height with the slider and see what size you prefer!
Creating a logo for Mobile
If you have a complicated logo, you might want to consider creating a more simple logo for your mobile website. This is because the details of a logo get lost when it is a smaller size and you need to ensure you are still conveying your brand with an even smaller amount of pixels. A simple logo is also generally perceived to look better on mobile.
To upload a mobile logo, simply scroll down while in the ‘Site Title & Logo’ menu. At the bottom you will see the option to click and upload a mobile logo.
In the top right hand corner of the website preview window you can toggle to mobile view so that you can see how your new logo will look on your mobile website!
This is particularly useful when editing the mobile logo size. This can be done using the ‘Mobile Logo Max Height’ slider in the ‘Site Title & Logo’ menu.
Amy Ilic
Squarespace Designer & Brand Conjuror
