How to Add a Logo to Squarespace

How to Prepare Your Logo for Squarespace

Before uploading, prepare your logo file to avoid display issues. The right format and dimensions make a significant difference in how your logo renders across devices.

Recommended File Format

Use PNG with a transparent background for the best results. PNG preserves crisp edges on text and sharp lines, and the transparent background ensures your logo blends with any header background color. SVG is also excellent because it scales to any size without quality loss. JPG works but does not support transparency, so your logo will have a visible rectangular background. GIF is supported but rarely the best choice.

Recommended Dimensions

Keep your logo under 500 pixels wide for most templates. Squarespace will resize larger images, but starting with the right dimensions gives you more control. For retina displays, create your logo at 2x your intended display size. If you want it to display at 250px wide, upload a 500px wide file. Height depends on your design, but most header logos work best between 50-100px display height. For overall design strategy, our guide to site creation and branding on Squarespace covers building a cohesive brand identity.

File Size

Keep the file under 500 KB. Your logo loads on every page of your site, so a large file slows down every page load. Compress PNG files using a tool like TinyPNG before uploading. SVG files are typically very small and rarely need compression.

How to Add a Logo on Squarespace 7.1

The logo upload process differs slightly between Squarespace 7.1 and 7.0. Here is the 7.1 process, which is the most common version for newer sites.

Step 1: Open the Site Header Editor

Log in to your Squarespace site. Click Edit on any page. Hover over the header area at the top of the page and click Edit Site Header.

Step 2: Upload Your Logo

In the Site Header editor panel, click Site Title & Logo. Under Logo Image, drag your logo file into the uploader or click to browse and select the file from your computer. Your logo appears in the header immediately after upload.

Step 3: Adjust Logo Size

Use the Logo Width slider to adjust how large your logo displays. The slider controls the maximum width and the logo scales proportionally. Test different sizes to find the right balance between visibility and header space.

Step 4: Set Your Site Title as Alt Text

Before uploading your logo, set your site title in Settings > General > Site Title. This text becomes the alt text for your logo image. Search engines and screen readers use it to understand what the image represents. Use your business name and optionally a keyword: "Mike's Photography - Wedding Photographer in Austin."

Step 5: Save

Click Save when you are satisfied with the placement and size. Your logo now appears on every page of your site in the header.

How to Add a Logo on Squarespace 7.0

On Squarespace 7.0, the process is similar but the interface is slightly different. Go to Design > Logo & Title. Upload your logo image in the Logo Image section. Adjust the display using the Logo Height setting (measured in pixels). Save your changes. The logo replaces the text site title in the header.

How to Add a Separate Mobile Logo

Your desktop logo may not look ideal on mobile screens. It might be too wide or too detailed at small sizes. Squarespace lets you upload a separate mobile logo for a better mobile experience.

In the Site Header editor, look for the Mobile Logo Image option (available on 7.1). Upload a simplified or differently proportioned version of your logo optimized for small screens. If you do not upload a separate mobile logo, Squarespace scales your desktop logo down, which may result in text that is too small to read. For mobile testing, our guide to Squarespace mobile optimization covers responsive verification.

How to Add a Favicon to Squarespace

A favicon is the small icon that appears in the browser tab next to your site title. Many people confuse it with the logo, but they are separate settings. Your logo controls what appears in your site header. The favicon is what visitors see in their browser tabs and bookmarks.

To set your favicon in Squarespace, go to Settings > Browser Icon. Upload a square image at least 100x100 pixels. PNG with a transparent background works best, though a solid background is fine too since the favicon is so small. Keep the design simple: a single letter, a small icon, or a minimal version of your logo. Detailed designs get lost at the small sizes favicons use.

If your favicon does not update immediately after saving, clear your browser cache or open your site in an incognito window. The change may take a few minutes to propagate.

How to Create a Logo If You Do Not Have One

If you do not have a professional logo yet, you have several options.

Squarespace Logo Maker. Squarespace offers a free logo creation tool. It is basic, letting you combine text with simple icons, but it produces clean, usable logos for new businesses. Access it from the Squarespace website.

Canva. Create a logo for free with more design flexibility than Squarespace's tool. Export as PNG with transparent background for the best results on your site.

Hire a designer. For a professional, unique logo, hire a graphic designer through platforms like Fiverr, 99designs, or Dribbble. Expect to spend $50-500 depending on complexity and designer experience.

Text-only logo. Use your site title as a text logo by choosing a distinctive font in Site Styles. Many successful brands use text-only logos with no image needed. For font selection, our guide to best Squarespace fonts covers pairings that work well as text logos.

Logo Troubleshooting

If your logo does not look right after uploading, check these common issues.

Logo Appears Blurry

Your logo file resolution is too low for the display size. Upload a higher resolution file. For retina displays, your logo file should be 2x the intended display size. A logo displaying at 200px wide needs a 400px wide source file for crisp rendering on high-resolution screens.

Logo Has a White or Colored Background Box

Your logo file has a solid background instead of transparency. Re-export your logo as PNG with a transparent background or use SVG format. JPG files cannot have transparency.

Logo Is Too Large or Too Small

Adjust the Logo Width slider in the Site Header editor (7.1) or the Logo Height setting (7.0). If the slider range does not give you the size you want, resize the original file and re-upload. For CSS-based size control, our guide to Squarespace custom CSS covers custom header styling.

Logo Only Shows on Some Pages

Certain Squarespace templates hide the header on specific page types by default. Cover pages and index pages often have their own header settings that override your global header. Open the affected page in the editor, click on the page settings or the header overlay, and check whether the header is set to hidden or transparent. If the header is intentionally hidden by the template design, you may need to enable it in the page-level settings or use a different page layout.

Logo Not Centering on Mobile

Mobile logo alignment is controlled separately from desktop alignment in some templates. In the Site Header editor, switch to the mobile preview and check the header layout setting. If the logo is left-aligned on mobile when you want it centered, look for a Mobile Header Layout or Mobile Branding Alignment option in the Site Header panel. Some templates require a small Custom CSS rule to force centered alignment on mobile screens. Our guide to Squarespace custom CSS has instructions for targeting mobile header styles.

Logo Disappears on Certain Pages

Some templates hide the header on specific page types such as index pages or cover pages. Check the page settings and template documentation. If the header is hidden by design, you may need Custom CSS to force logo display or reconsider the page layout.

Upload Your Logo and Build Your Brand

Adding a logo to Squarespace takes minutes. Use PNG with a transparent background, keep dimensions under 500px wide, and upload a separate mobile logo for the best experience across devices. Set your Site Title first so it becomes the logo's alt text for SEO and accessibility. While you are in Settings, add a favicon too so your brand appears in browser tabs.