How to add social media icons to your Squarespace site’s navigation
Adding your social media links to your Squarespace website's header and footer navigation is a no-brainer if you want to keep your visitors connected with you. People may find your website through a Google search, but that doesn't mean they are "Google people." Maybe they're more "Instagram people" or "YouTube people" and prefer those platforms. If you give them an easy way to keep up with you through another platform, you're more likely to stay on their radar. Plus, this is also a great strategy for building trust—when they see your active social profiles, you're a real person or business they can engage with.
So, you know why you should be putting your social media icons on your Squarespace website, but let's talk about how to do it. Keep reading!
How to add social media icons to your header
Adding social media icons to your Squarespace header is a great way to make it easy for visitors to find you on social media. Follow these steps, and your accounts will be just a click away from anyone who lands on your site.
Hover over the header navigation.
Click Edit Site Header.
Click Add Elements.
Turn the Social Links toggle on.
A Squarespace social links block will then be added to your header.
Hover over your header navigation again and click Edit Site Header.
Click the newly added Social Links block and click the edit social links (pencil) icon.
Under the Content tab, click Add Social Link.
In the text field, paste in your social media account URL.
Click the enter key on your keyboard. If the social media account you're adding is part of the list of social media sites Squarespace has built-in icons for, the site-specific icon will show up. If the site is not part of the list, a generic link icon will show up.
Click the account and make sure the Display Social Icon toggle is turned on.
You can reorder your icons by clicking Edit in the Content tab, then just dragging the accounts up or down. The top account will be at the far left and the bottom account will be at the far right.
To remove the Social Links block from the header, click the block, then click the trash icon.
How to customize the built-in header icons
There are a few ways to customize Squarespace’s social media icons in the header.
To change the size:
Hover over the header navigation.
Click Edit Site Header.
Click the Social Links block.
Click the Design tab.
Adjust the size under Social Icon Size.
To add/change/remove a border:
Stay in the Design tab.
Under Border, you can add a square, circle, or squircle (between a square and a circle) border.
To change the icon color:
Hover over the header navigation.
Click Edit Design.
Under the Color tab, change the color setting in Navigation Color. However, doing this will also change the color of the other Navigation elements (except the button).
How to add social media icons to your footer
Just like adding your social media icons to the header, adding them to your footer can make it easier for your visitors to find your social profiles (and then follow you). Here’s how to do it.
Hover over your site’s footer.
Click Edit Site Footer.
Click Add Block.
Under Basic, choose Social Links.
Drag the Social Links block to the section of the footer you want it in.
You can add more social media icons the same way you would in the header by clicking the Social Links block, then clicking the edit (pencil) icon, clicking Add Social Link, pasting in your account URL, and finally, clicking the enter key on your keyboard. But since the Social Links block is site-wide, whatever icons you add will be added to the rest of the blocks.
Just like with the header, to remove the Social Links block, just click the block then click the trash icon.
How to customize the built-in footer icons
Customizing the built-in footer icons is going to be similar to customizing the header icons, with a few key differences.
To change the size:
Hover over the footer.
Click Edit Site Footer.
Click the Social Links block.
Click the Design tab.
Adjust the size under Size.
To add/change/remove a border:
Stay in the Design tab.
Under Border, you can add a square, circle, or squircle (between a square and a circle) border.
To change the icon color:
Hover over the footer.
Click Edit Section.
Under the Color tab, click the edit icon next to your footer’s color theme.
Under Social Links Block, change the Main Color and the Secondary Color (if those colors are different, your icons may be multicolored depending on your border specifications.
How to remove a social media icon from your social links block
If you need to clean up your social media icons or simply want to remove one from your header, footer, or another page, it’s quick and easy to do. Just remember, the social links block is a site-wide block, so whatever changes you make to one block will change the rest. Here's how to remove or hide a social media icon on your Squarespace site.
In either your header or footer, click the Social Links block.
Click Delete Social Link to delete the profile.
To just hide the profile, turn the Display Social Icon toggle on.
How many social media icons should you include?
When it comes to social media icons on your Squarespace site navigation, aim for just 3 to 5 that really matter to you and your audience. Any more than that and your navigation starts to look cluttered, and you start to overwhelm your visitors with options. So, choose the platforms you’re most active in, like Instagram, Facebook, and Pinterest.
Want to learn more?
Now you know exactly how to add social media icons to your Squarespace site's header and footer! But do you need more help? You can learn more about Squarespace, design, copywriting, SEO, and more on the blog! Here are some of our favorites!
Why SEO is important for business
How to resize images in Squarespace
Is blogging still relevant in 2024?
Using Squarespace as a Linktree alternative
How to add your Instagram feed to Squarespace
How to grow your business without social media
