Adding your logo to your Squarespace 7.1 website

A quick walk-through on how to add your brand logo to your Squarespace website!

In this video:
uploading your logo
best practices for sizing your logo
uploading your site favicon
adding your site social share image

TL;DR Version

Changing your site logo

Upload your logo as a PNG file with a transparent background, up to 1000px long but with a file size of 500KB or less.

Edit > Edit Site Header > Site Title & Logo > upload your logo

Adding your site browser icon

Choose a favicon image that is 100px x 100px. (Squarespace won’t let you upload a favicon image larger than 100KB. It should be a small, simple shape.

Click / > Type “favicon” in the search box that appears > upload your favicon

Adding your site social image

Design > Social Sharing > upload the image you want to populate when someone shares a link from your site.

VIDEO TRANSCRIPT

  Hi there, this is Alana from Elo Creative Studio, and in this video, I'm going to show you how to upload your logo, as well as your site favicon, and your social share image to your Squarespace website.

This video is recorded specifically for helping with my templates, but it's applicable to anyone who's building a Squarespace 7. 1 Fluid Engine site. Let's get started!

 The first thing you'll want to do is update the logo for your website.

You're going to want to upload a PNG file with a transparent background, and this should be a high quality image, but a small file size. Squarespace documentation recommends uploading a logo that's about 400 by 200 pixels. I actually recommend doubling this. So, for example, this logo that I've uploaded for this particular site is about 1000 pixels by 200 pixels, but it's at 72 DPI, and so the file size is still well below 100 kilobytes. You can create a transparent PNG file through Canva, or any of the Adobe products like Illustrator, Photoshop, or XD.

To change our logo or update a new logo, we'll go into Edit, Site Header, Site Title and Logo. From here, we can change our site title. I recommend including SEO keywords in your site title to help increase your visibility on Google.

For example, my website's site title is actually Elo Creative Studio Web Design and Website Copywriting.

You can change and remove your logo here, so we'll just click remove. And now we'll see that our site title is what's populating as our logo on our header. If you don't want to upload a PNG file, you can also use your site title, and I'll show you how to change the font styling to make it look a little bit different than the rest of our headers.

For now, we'll go ahead and upload a PNG file, which is the method that I recommend. So we'll just click add logo. And you'll see this file size, for example, is only 34 kilobytes. So, a very small file size. Once we've uploaded our logo, we can change the size by adjusting the height.

And we can also edit this on mobile as well. In order to see what we're doing for this, we'll want to click over to the mobile view. Click edit site header again, and just go back into the same site title and logo box that we were in. Once we feel good about the sizing for our logo on both desktop and mobile, we can go ahead and click save and exit out.

You actually also have the option to add a separate logo for your mobile site as your desktop. So let's say this logo doesn't actually really look as good on mobile as a desktop. We can scroll down and add a mobile logo image. So to give you an example. And ultimately, even when we play around with the size for this one, I still don't think it looks as good as our original logo, because that text is very small. So we'll just go ahead and remove that.

Now, if you're just getting started and you don't have a logo file as a PNG for whatever reason, we can actually go ahead and use Squarespace's built in fonts. Again, I do recommend uploading PNG logo, it's going to look more professional and it gives you the ability to add SEO keywords to your site title.

I'll cover SEO practices in a separate video, so please refer to that. For now, we'll go ahead and remove our logo image. And then to edit this text styling, we'll go into our regular site styles panel. Click fonts. And then you can click Assign Styles, and Site Title.

Another way of finding this once we're in fonts, is hovering over the specific element that we want to change. So in this case, we'll click Site Title, and you'll see it'll take us directly to that styling panel. Click Site Title, and right now, the site title is assigned to our regular heading styling. To change this, we'll simply change it to custom, and from here we can select the family. Squarespace has tons and tons of fonts. They pull fonts from Adobe and Google Fonts as well, so you'll see, based on the scroll bar, there are a lot of things to choose from.

Once we've selected the new font family we want to use for our logo, we can simply back out and then we can change the styling. We can change the font weight, we can change it to italic, we can change the letter spacing, so on and so forth.

To change the size of the text logo, you'll simply change the site title size in this panel here. These styles won't carry over to our mobile version, so we'll actually need to click over to the mobile side, click the logo again, And now you'll see we're in the assigned styles for the mobile site title. We'll go back into custom again, and then just copy the same styling that we made for our desktop version.

Now let's add our site favicon. The favicon is the little icon that pulls up at the top of your web browser that lets people clearly and quickly identify your website when they have a billion tabs open. So, myfavicon for example, or we have like this one for Mas, this one for Enuf. So you want it to be really simple, geometric, ideally some fun pops of color, that way your brand is really visually apparent.

The easiest way to access this is by using our keyboard shortcut. We'll press our forward slash on our keyboard and you'll see this search panel pops up automatically. You can start typing browser icon or favicon and that will pull up the page for you.

Squarespace forces you to add a favicon file that is really, really tiny. As you can see here, it has to be less than 0. 1 megabytes. What this means is that it should be a square icon, ideally 100 by 100 pixels max.

We'll simply click to add the favicon, or you can always just drag an image directly from your computer.

This is actually going to be an example of what not to do for a favicon, as you'll see in a moment. So, as you can see here, this file does not show up at all as a favicon. So again, just a reminder, you don't want to use a favicon that has too many details, or tiny text. It should also not be transparent. It should be a solid and simple design.

Lastly, we'll add our social share image, which is just going to be the image that populates whenever anyone shares your website on social media platforms like Facebook. Again, we can just type the forward slash on our keyboard and type social share, or we can go into design, social sharing. This could be just your logo, or it could be an image.

 A quick note that some of my templates, like my Whimsy template, actually have custom headers, so the method of updating the logo is going to be a little bit different. So for help on that, please see the template specific video tutorials for instructions on making edits to these.

Squarespace is a trademark of Squarespace Inc. Elo Creative Studio is not affiliated with Squarespace.