It’s time for the fun stuff! If you’re anything like me this is the part you’ve been waiting for. We’re going to take that basic but beautiful Squarespace template you chose in the last Module and make it your own.
Let’s start by adding your logo. First, log into your site and click Design from the Home menu. Here you’ll see a menu item aptly named Logo & Title, click that.
Your site is going to stay on the right hand side, showing whichever page you were last working on. Over on the left hand side of the screen you’ll see a few different Modules.
Site Title / Tag Line
Your site title should be set already. That information comes from the name you entered when you created your site. If you need to change it though you can do that anytime. If you have a tagline you want to use you can put that in here as well, although it may not show up anywhere depending on your theme.
Here you’re going to upload your logo file. Once you’ve uploaded the file click Save and your site will update on the right hand side so you can see how the logo looks. I always recommend using a PNG file with a transparent background for this, because you might want the logo to show up over the top of different colors or photos in your site header. If you don’t have a logo with a transparent background a JPG will work too, just make sure your header is the same color as the background of the logo… a big white square around your logo doesn’t scream professionalism!
If you don’t have a logo and aren’t able to invest in one right now you can use Squarespace’s logo creator to make your own using the button here.
Browser Icon (Favicon)
As the description here tells you, a favicon is the tiny graphic that shows up in the browser tab or address box when you visit a site. You definitely want to upload one here, but you can’t just upload your logo again because the file type most likely isn’t right.
So first, what type of graphic should you even use? If your logo is fairly simple you can use that. I actually use the dreamcatcher from my current logo as my favicon and it looks great. If your logo isn’t so simple you could use a letter to denote your business name, or even use a small part of your logo if it might be recognizable. Don’t overthink this, just find something that looks good and use that.
Since this needs to be a .ICO file, the easiest route is to use a free online service to convert your graphic to the right format and size. There are several out there, but I recommend http://convertico.com/favicon-generator/. You can also just google Favicon Generator. Once you have your .ICO file upload it here.
Social Sharing Logo
When you or someone else shares pages from your site on social media the site has to supply a photo to be used as a thumbnail. This is easy enough on blog posts with graphics, but there may be pages on your site where there isn’t an obvious graphic available. The social sharing logo is basically just a default graphic for social media shares.
You can use your logo, another graphic, or take a screenshot of your home page and use that.
Adjusting the logo width
After you’ve uploaded your logo you may realize it doesn’t fit exactly right with your header. No worries! Squarespace makes this easy to fix in most templates.
First you’ll need to go back to the Design menu by clicking ← Design at the top of the sidebar, then click Style Editor. We’ll talk a ton more about this Module later, but for now we’re just going to adjust our logo a bit.
With the Style Editor open you should see blue boxes pop up around your site elements as you hover over them. Hover over the logo until you see it’s blue bounding box appear, then click on it. You should now see all the style options that apply to your logo and Site Title. You can access all of these from the first Style Editor screen, but this helps cut out some of the non-essential options so you can make your changes quickly.
Each template will have slightly different “style tweaks” available in this Module, but you should see something similar to Logo Size or Logo Width. You may also have a Mobile Logo Size option like I do. Hovering over these will bring up a slider that you can adjust to get your logo just right, or you can click and enter a pixel dimension at the end of the slider. Once you’ve made your changes here click Save and then Design to go back to the Style Editor.
Customizing your header and footer
One of the first things I do when I’m building a new site is customize the header and footer with my own logo and information. This helps set the tone for the rest of the design and gives me a framework to work from.
You’ve already set up your navigation menu, that’s what the blank pages we created earlier were for. And you’ve added your logo now, so the header should be nearly finished. There are a few more things you can do to polish the design a little more though.
First, go back to the Style Editor (Design -> Style Editor) and click around the header to see the different style tweaks available there. You should be able to change the header background color, padding (the empty space around an object), menu colors and hover colors, and fonts for this Module.
In the next Module we’ll talk about exactly how to make changes in the Style Editor, and look at the options for the rest of the site, but right now let’s go over some design best practices for your header and footer. These aren’t hard and fast rules, but they are good choices to make if you want your site to feel polished and put together.
Quick tips for creating a clean site header and footer
- When in doubt, keep it simple
Your header is important, but it’s also a means to an end. Keep it slim, simple, and easy to navigate. If you feel like your menu is too cluttered stick to no more than 4-5 main menu items and add the rest in dropdown menus or the footer menu.
- No one loves your logo like you (and your designer) do
Yes, you want your potential client to see your logo, and having a professional logo is important, but it doesn’t need to take up half of the top of your site. Your client wants to know who you are and that your site looks clean and professional, then they want to find what they’re looking for quickly. Don’t take up too much room with a large logo at the top of the page.
- White is an acceptable header or footer background color
Only use a colored background if it doesn’t clash with your logo design. My logo for example has five different colors in it, and there are very few colored backgrounds I would put it on. If you decide to use a background color make sure the logo and menu are still easy to read; that’s the most important part.