2 Images I Wish I Had Created before Building My Squarespace Website
Squarespace Tips & Hacks. Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!
LATEST UPDATE: FEB 2019 (new blog copy, new images, new look!)
Spoiler alert - the images are the Favicon and the Social Share Logo. Keep reading…
Nothing like diving right in to build your new Squarespace website. You're eager. You love the look and feel of the platform, you just want to get started. (Or get your client's site started)
Believe me, I did it. Three Times actually.
The second time was when I decided to go freelance and help web designers and entrepreneurs build Squarespace websites and write web copy. I rewrote and redesigned my website. The third time was when I rebranded with the amazingly talented Olivia from Let’s Go Studio.
You need a favicon image and a social sharing logo image.
So here's the deal, you build the site, fiddle around, rewrite copy, edit copy, rewrite it again, move it around, add your images and finally you get your website looking and sounding the way you want.
Your eyes hurt.
You've been on the computer all day.
You’ve got client work to get to.
You'll add those images later.
(And then you'll forget - like I originally did. And then you'll wonder why there's no decent image to go with your Facebook post when you link to your website or why the little tiny image in your browser tab is Squarespace’s black box.)
Let’s fix this!
How to create Favicon and Social Sharing Logo Images for Squarespace and where to upload them
Your Favicon displays at 16px x 16px but the best size for the original image is between 100px x 100px and 300 px x 300px.
Your Social Sharing Logo should be 200px x 200 px, but you may have to experiment with it as Facebook often changes their image size preferences. Later in this post, I’ll show you what the Facebook image looks like as a post link and as a comment link.
To upload your photos, click over to Home --> Design--> Site Title & Logo.
Adding both a Favicon and Social Sharing logo is super simple and uploads just like a regular image in a blog post or page on Squarespace.
Here's how to upload a Favicon.
Here's how to upload a Social Sharing Logo.
You may have to clear your browser cache and refresh your page for the Favicon to surface.
A Note about Squarespace’s Social Sharing Logo
My Squarespace Design in a Day™ partner Sarah Moon advises that the best type of image is a simple photograph, one that doesn’t have words in it and that matches your branding. It could be your home page banner image or some other image that reflects your overall message.
In my case, I’ve used my site’s main banner image - without text. (Trust me, I’ve tried it with text and yuck!) The words often get cut off when someone (or I) links to my website in a Facebook post or comment. I also don’t use my favicon / logo mark image because part of it gets cut off in a linked FB post. Looks ugly. Bleh.
Using the Facebook Debugging Tool - Step by Step
*Note, linking to blog posts in FB will pull up either that post’s thumbnail image or the first image in your post.
Facebook Debugging Steps
Step 1 - Type your URL into the field and click the Debug button. (You’ll have to log into to Facebook to access this tool.)
Step 2 - Click the Scrape Again button if you don't see your new Social Sharing Logo. You might have to do that a couple of times.
Step 3 - Test how your Social Sharing Logo looks on your Facebook wall or Page. Remember to click the 'ONLY YOU" privacy option to hide this test from your friends. (Unless you want them to see it. #oopsnotoops)
Squarespace Tips & Hacks
Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!
Need to launch a website RIGHT NOW and no time to learn Squarespace?
Try out Design in a Day™, my collaboration with Squarespace expert and web designer Sarah Moon. We'll snap together a polished website based on a Squarespace template that you choose or we recommend.
This is a quick and efficient process to get you online in time for that big opportunity that demands a solid online presence.