Three ways to customize your Squarespace site in under five minutes
- Remove the current class from the content27_link item as Webflows native current state will automatically be applied.
- To add interactions which automatically expand and collapse sections in the table of contents select the content27_h-trigger element, add an element trigger and select Mouse click (tap)
- For the 1st click select the custom animation Content 28 table of contents [Expand] and for the 2nd click select the custom animation Content 28 table of contents [Collapse].
- In the Trigger Settings, deselect all checkboxes other than Desktop and above. This disables the interaction on tablet and below to prevent bugs when scrolling.
These tips may be small, but these customizations are little details that can make a site feel polished. Plus, they’re all pretty quick, so you can add some near-instant gratification to your day.
01. Upload a custom favicon
Your browser icon, also called a favicon, is the little icon or image that appears next to your site name in your browser tab. By default, all Squarespace websites use the same favicon, a dark grey cube.
You can use your logomark, headshot, or an icon of your choice. Any personalization here will make your site stand out.
These images need to be small — under 100 KB — in .png or .ico format, and square, but that’s easy to do for free online.* I’ve also made a set of favicons you can download and choose from if you don’t want to make your own!
Once you have your custom favicon, you can upload it by navigating to the Favicon section of your Website Settings (Settings > Website > Favicon). When you’re logged into your Squarespace account and in your site, you can access this menu by typing “/favicon.” This is a shortcut that works in both Squarespace 7.1 and 7.0. You can upload your file here. You may not see it immediately appear in your browser, but it’s there!
Have more questions about favicons? Squarespace has a great help article on adding a favicon or browser icon.
* Website planet has a tool can make a favicon out of images up to 5MB — thank you, Estefany for sending it my way!
02. Remove “Powered by Squarespace” from your footer.
Squarespace sites all come with “Powered by Squarespace” or “Made by Squarespace” in the footer — there’s nothing wrong with removing this! It’s, of course, nice to give credit, but it’s also fine to take it out of your footer. Instead, let your footer serve to act as a mini site directory, focusing on your own content.
Once you’re logged in, edit any page and scroll to the Footer. If you hover your mouse over, it should say “Edit Footer” and from there you can delete or replace the text.
Make sure you double check any links and the Social Block to ensure they’re set to your social media and that links haven’t broken during the customization process.
03. Create a custom 404 / Error Page
By default, if someone tries to access a page with an incorrect or broken URL, or an old URL slug that hasn’t been updated with a 301 Redirect, they’ll hit the 404 Error message.
By default, Squarespace’s message is:
“We couldn't find the page you were looking for. This is either because:
There is an error in the URL entered into your web browser. Please check the URL and try again.
The page you are looking for has been moved or deleted.
You can return to our homepage by clicking here, or you can try searching for the content you are seeking by clicking here.”
Squarespace allows you to redirect to a page of your choosing instead of displaying this message.
I like to create a page specifically for this — one that communicates that the page they’re looking for is elsewhere, while offering them an easy route to find it. Since I have a site directory in my footer, I only offer a few links.
I create this page in the “Not Linked” section, so it doesn’t appear in the navigation.
To set this as your custom 404 page, navigate on your grey sidebar to Design > 404 Page and you’ll be able to select from a dropdown menu of your existing pages.