Our Favorite Squarespace CSS Codes in 2025

Want complete control over your Squarespace website's look? These CSS codes are your secret weapon! What if you want a design change that Squarespace doesn't offer in its settings, and you can't find the perfect plugin? That's where the CSS Editor comes in. Squarespace gives you the power to add your own custom code. This functionality opens up endless possibilities for adding unique elements, scripts, appearance tweaks, and more!

Want to learn CSS?

If you want to learn CSS for Squarespace, check out these courses.

Want to skip CSS with an Animation plugin?

There are 2 extensions that allow you to customize and style your site without touching any of the snippets below. SquareKicker and Spark Plugin.

Disclaimer

Before we begin, I have to lay down a bit of groundwork. Using the CSS Editor is a powerful tool, but it does come with a drawback: malformed code or improperly handled code can be detrimental to your site.

While you can change many elements of your site with CSS, Squarespace says explicitly, "You should only use CSS to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site."

That said, nothing prevents you from making other changes to your site. As long as your CSS code is implemented correctly, it won't hurt your site. There are just a few caveats.

• If you're using a 7.0 Template and want to change templates, you'll need to reapply custom code; it doesn't transfer over. It does on 7.1.

• Squarespace will not offer support or troubleshooting for custom code. If your CSS breaks something, they won't help you fix it.

• Squarespace does not consider custom code when they update their platform. So, if they change a CSS class in their design and it breaks your code, well, you have to fix it yourself.

• Custom CSS has a 128,000-character limit. This should be way, way more than you'll need, but it's worth keeping in mind if you're doing a ton of CSS customizations.

Finally, keep in mind that the custom CSS editor isn't the only way to make custom code edits to your site. There are several options, which may be a better fit for your use case.

Code Block (Basic): This is a content block that can execute custom CSS, HTML, or Markdown, for a specific page. Suitable for content-level or page-level changes. Available on all plans.

Code Block (Advanced): This is the same block, but it's also capable of adding iframes (not recommended for SEO reasons) and JavaScript. It's only available on Business and Commerce plans.

Code Injection: This option injects site-wide code, like the Facebook Tracking Pixel or a live chat service. Only available on Business and Commerce.

CSS Editor: This is the primary tool we'll be using today. Available on all plans, it allows you to add custom CSS to your site on a page level. Squarespace says not to make layout changes with it, but it's okay if you do it right. For a sleeker-looking CSS editor try Resurface.

Embed Block: This is a unique code block that executes embed code, so you can embed content from sites like Facebook, Instagram, and anything else that uses oEmbed. Available on all plans.

Squarespace Developer Platform: This tool makes significant changes to a template in 7.0 only. Only available in Business and Commerce, think of it as an advanced dev tool.

You're also wholly barred from running server-side code outside of the code injection feature, which is limited. You can't do any SQL, Ruby, PHP, or anything of the like.  

Anyway, with all that said, let's dig into the cool things you can do with CSS! There's a lot, so stick around to explore.

Cool CSS Tweaks and Hacks

Sidebar Plugin

Starting with precisely what Squarespace says not to do, check out this sidebar option. It's formatted as a plugin, so you don't have to muck about with too much code directly. Instead, it changes the layout and formatting of your site to add a sidebar, which can display content like an author bio, a recent posts block, or a newsletter opt-in. It's very robust and super beneficial for marketing purposes, so check it out!

CTA Animations  

Now this one is cool. Did you know that CSS – pure CSS, no other scripting involved – can make animations? There are some awesome things you can do with this. Many websites with parallax backgrounds and slide-in elements as you scroll use CSS for it, but that's not quite what I have for you here.

On a website, you've probably seen cases where an element wiggles on a timer every 30 seconds or so. A button will occasionally wobble, a call to action will bounce a bit, or a box will lightly flash. Years ago, you had to use animation with a .gif or (shudder) a Flash animation to do that. Today, you can do that with CSS.

Check out https://animate.style/. This site is a massive resource for CSS snippets for tiny little animations, like bounce, flash, pulse, swing, and wobble. There are dozens of them (two scroll bars to the right, if you can't access most of them), complete with demos and installation guides.  

Now, this site is aimed at using CSS in any context, not specifically Squarespace. So you'll have to use the code injection feature to embed their core script and then use custom CSS elements to flag the elements you want animated. But it's pretty simple, so give it a try!

Simple Fade  

This CSS technique is a straightforward tweak, and you've probably seen something like it before. When you hover over an element, such as an image or a menu button, colors will fade in. For pictures, it can be used to highlight them, add color over them, or fade them out a bit. For menu items, it's excellent for highlighting a background color to show users which item their cursor is on. It's easy, very lightweight, and a perfect upgrade for usability.

This page has code snippets for three different use cases: fading text, highlighting images, and backgrounds for menu items. Pick your use case, copy and paste the code, and you're good to go.

Color Gradients  

If you're not aware, a gradient is when two colors fade into one another by passing through the shades in between. They're great for subtle color transitions and significant variances from one side of an element to another.  

In the past, if you wanted something to be a gradient, you had to do a bunch of tricky work with an image manipulator to get the colors just how you liked it. Even then, if users were browsing your site with a larger or smaller screen than you designed for, things would look off and weird.

With CSS, you can implement a gradient that works. You specify the element, you select the colors, and the code does the rest.  

"Doesn't it require a lot of tedium to pick and specify colors?" Not at all! It would - if you were doing it manually, but why would you ever need to do that?  This generator is an excellent tool for precisely this purpose. It lets you pick anchor colors on either end, transition colors in the middle, and specify how far along the bar you want the transition. You can even click to add more anchor points for additional colors and make a whole rainbow.  

You can do both linear and radial (circular) gradients, and you can specify exact hex color codes if you have colors as part of your branding. All of the code generates dynamically below the generator, so you can copy and paste it when you have it tweaked the way you want it.

Rounded Corners  

This technique is another one of those elements that are deceptively simple. You wouldn't think it would be challenging to make rounded corners around an image or text element, would you? Yet, if you've ever tried to do it without weird custom code, it's nonsense! Back in the day, you even had to do things with perfectly aligned background images, tables with lined-up elements for borders, and other nonsense.

All of that is in the past now. CSS allows you to make easy, rounded corners for anything. Want rounded corners on an image? Want a rounded box to highlight a call to action? Want your lightbox to have rounded corners? It's easy with a bit of CSS.  

This technique is just one of dozens of simple CSS tweaks you can do, provided by W3Schools. W3Schools is a web design organization that provides thousands of simple tutorials on everything from HTML to advanced CSS animation.  This page details the rounded corners element, and you can browse all of the other CSS tweaks through the sidebar.

Hidden Elements  

Now for one, that's a little more serious.  

One issue that many sites have, Squarespace included, is mobile rendering using responsive design. Specifically, the site parses all of the code on the page and loads every element, adjusting what displays based on the viewport's size (aka your browser).  

Hidden elements are usually fine. Except for one thing - what happens if you have, say, a sidebar with a couple of images in it? That sidebar isn't going to load on mobile because it would be way too cramped. But, since the site loads the content before determining what displays, you're still spending time loading the images in the sidebar. These resources delay the load speeds on your site.

If you check your Google PageSpeed Insights report and you see "defer offscreen images" as an error, this is what it's referencing.

The solution to this is usually lazy loading, but there's a new CSS element called content-visibility that helps with this. It's relatively new, and it's not supported by every browser just yet, but it's hugely valuable. Lazy loading is most likely going to get more support in the next few years.  This page details the element, how it works, and how to use it. Check it out!

Simple Appearance Tweaks  

There are a handful of tweaks on this page that do tiny little cosmetic things that, nevertheless, dramatically change the appearance of your site. What tweaks?

• Remove the underline from links, which Squarespace adds by default.

• Remove hyphens (-) from the text on the mobile display when text wraps.

• Remove excess space at the bottom of a Brine-based template.

• Narrow the column where your blog content displays.

• Limit mobile product page displays to one product per row.

These are all relatively simple, minor tweaks, but they can completely change the feel of your site to make it much more modern and sleeker. It might not seem like much, but give them a try, and you'll see how important they are.

Other Compilations of CSS Hacks 

I'm only scratching the surface of what you can do with CSS here. Already, several of the links up above are pages with dozens of CSS tweaks on them, but there are way more out there, including more advanced guides.

Here are a few you can check out.

• HUGE LIST OF SQUARESPACE HACKS AND TWEAKS (WITH LINKS AND EXAMPLES). This page has everything from creating a summary block to hiding tags in blog posts. They aren't all CSS, but they're all clever and valuable regardless.

• “50 Design Tweaks” from Five Design Co.  As it says on the tin, this page has 50 different tweaks you can add to your site. These include adding hover animations and dropping shadows to making images circular, using custom bullet point designs. Almost all of them are simple CSS, too.

• “35 Code Snippets” from Paige Brunton.  This article is another extensive list of CSS hacks, including adding header styles, customizing your "read more" link, and dividing your backgrounds into two segments. Many of them are niche, but if you like the design options they give you, they're great.

With all of these resources, you should be able to do pretty much anything you can envision for your site.

So what's your favorite CSS hack from this list? Do you have any that you'd like to share that aren't mentioned on this list? Are you stuck on implementing any of these on your site? Let me know!

---

Looking for more Squarespace plugins?

Huge List of Squarespace Hacks and Tweaks (With Links and Examples)

Squarespace is a powerful little platform.  Most of the power of that platform, however, comes from the fact that it’s mostly preconfigured and ready to go.  A newcomer to web design can have a site up and running, fully functional, in a matter of a couple of hours. 

That said, many intermediate-to-advanced webmasters may want to get more out of the platform than it typically allows.  There are several ways to do this, and I’ve compiled as many of them as I can find.  These hacks, tweaks, plugins, and other customizations are all possible within the Squarespace framework but may require a little custom coding.  Thankfully, it’s all pretty easy.

Let’s get started!

Squarespace SEO Hacks

First up, let’s start with a series of relatively simple SEO hacks and tweaks you can use.  These are small tweaks you can set up that help with how Google views your site, how users view it, and how it’s used.  They don’t make a huge difference, but they do have an effect, and it can’t hurt to use them.

Testimonial Slider

Part of modern SEO is social proof, and social proof can go a long way towards boosting trust and engagement with your site. 

A key element of social proof is testimonials, and this plugin gives you a great way to display a bunch of them in a slider, quickly and easily.

Automatically NoFollow Affiliate Links

This guide gives you step-by-step instructions for adding link attributes to individual links or entire classes of links. 

Specifically, it’s aimed at adding nofollow attributes to affiliate links and cloaking them, which can be useful for both SEO and usability.

Custom 404 Page

Whenever a user lands on your site on a page that doesn’t exist, they end up on a 404 page. 

These are less than exciting, and often drive users away.  Customizing your 404 pages allows you to engage them and help them find what they were looking for, and this guide tells you how.

Squarespace Blog Enhancements

The Squarespace blog is, by default, quite powerful and feature-rich.  It’s not perfect, though, so here are a few things you can do to improve its look, feel, and functionality.

Facebook Comments

The default comments system for any blog is usually less than stellar; this plugin allows you to embed Facebook Comments into your blog instead. 

Facebook comments have one primary advantage: most everyone is already logged in.

Font Tweaks

Squarespace allows you to use virtually any font in the Google Fonts library, and a broad selection from Adobe Fonts, but you need to set up an integration to get them to work. 

This is a guide on how to do that.

Fixed Announcement Bar

Squarespace allows you to create a top-of-page announcement bar, but once the user scrolls down the page, that bar disappears. 

This is a simple tweak to get it to stay fixed to the top of the page, sticking with the user as they scroll.

Squarespace User Experience Tweaks

There’s no perfect user experience.  Tastes in web design, trends, and activity changes every year.  There are, however, quite a few things you can tweak or implement to make the user experience better.  I’ve accumulated quite a few of these over the years, and this list represents my favorite and most effective tweaks.

Squarespace Sidebar Plugin

This is a plugin that allows you to create a sidebar of content to display on any page on your site. 

It’s a clever use of embedding content from one page to another, works with both 7.0 and 7.1, and is super easy to install, theme, and customize.

Accordion Tabs

Ever seen a site with an FAQ or directory that has headings visible, but collapses the content under those headings until you click on them? 

That’s an accordion interface, and this plugin allows you to create and configure your own, with zero programming knowledge necessary.

Table of Contents Links

Many blogs, my own included, use a table of contents for each post.  You can click on a link in the sidebar and jump directly to the relevant point in the blog post. 

This requires using internal anchor links for the page, and my guide explains how to implement them quickly and easily.

RSS as Summary

Many blogs have a “related posts” section, and Squarespace allows you to configure one in the summary block.  However, this only works for preconfigured collections you set up. 

This plugin adds the ability to set an RSS feed – from your site or other sites like Medium, Feedburner, and Wix – to broaden your content embeds.

Countdown Timer

This is a simple plugin to add a countdown timer to your site. 

It’s useful for stirring up FOMO for a limited-time offer, generating interest about an upcoming event, and counting down to a new product launch.

Masonry-Style Gallery

The default gallery layout for images in Squarespace is a grid, but that can look a little lifeless, particularly with images of varying heights. 

This plugin converts galleries into masonry-style fit-to-space layouts, which are much better for varied images.

Gallery Dot Navigation

Any time you have a gallery of images that slide from one to the next, it’s a good idea to give users an indication of where they are in the slideshow, and how many images are in the gallery. 

This adds dots for each, highlighting the one the user is on.

Gallery Image Counter

Similar to dot navigation, this adds a simple count of images in a gallery, with a number for the one the user is on, like 4/12. 

Simple and easy.

Squarespace eCommerce Boosters

If you’re trying to sell something through Squarespace – and aren’t we all? – this is a critical section for you.  Enhancing your product pages, your conversion process, and your handling of various side issues is crucial for a robust and fully-featured storefront.  These are some of my favorite tweaks and most effective hacks.

Lightbox Anything

This is a plugin that allows you to create a pop-up lightbox with any information you want, which can display in response to a click. 

Display sizing charts, product specifications, a product upsell, or anything else you can think of, quickly and easily.

Sync Product Variant Images

Maintaining a consistent appearance across all of your storefront is hugely important for appearing professional, which is a trust signal and helps increase conversions. 

Squarespace eCommerce, by default, handles some of this, but this plugin enhances that functionality.

Members-Only Area

Giving members of your community – or just paying customers – exclusive access to content or products is a great way to encourage conversions. 

Setting up a members-only area can be a bit tricky, though, so I produced a video guide on how to do it.

Waiting Lists

If you have a limited quantity of a given product and it sells out, what are your users going to do? 

This code allows them to add themselves to a waitlist for a notification when the product is back in stock.

Product Color Swatch Variants

Many eCommerce stores use colored/patterned dots to allow you to preview a product in different colors and designs. 

This plugin lets you do the same thing with Squarespace.  All you need to do is set the right hex codes.

Inventory Indicator

If you have a limited inventory, and want to use that limitation as FOMO to encourage conversions, this plugin allows you to add that display to your product pages.

Squarespace Service Integrations

Squarespace is powerful, but it can’t do everything.  This section is relatively small and only represents a handful of things you can do with Squarespace integrations, but it’s some of the most effective hacks I’ve used over the years. 

Yotpo Reviews

Yotpo is one of the most powerful systems out there for eCommerce, but there’s only so much you can do with it in Squarespace. 

One of the best options is to use Yotpo reviews as embeds on your product pages, but it takes forever to add these manually.  This plugin does it automatically for you.

Parabola

A simple utility for automation, Parabola allows you to do nice things like export orders into a Google Sheet. 

It’s easy to use, so I gave it a look and made a video about how it works.

Mailchimp and Google Analytics

Email and newsletter management is best done with a tool like Mailchimp, but you may want to do more advanced tracking into how well your newsletters convert. 

This guide helps you set up Google Analytics tracking for Mailchimp-managed newsletters.

Alternative Payment Gateways

By default, Squarespace only allows you to use PayPal and Stripe to process payments.  This is fine for many merchants, but if you’re in a high-risk category, those gateways won’t work with you. 

Rather than risk having your access cut off with no notice, use this guide to set up an alternative payment gateway.

Additional Hacks and Tweaks

Unfortunately, I can’t cover every single thing you can do with Squarespace in a single article.  Rather than try, here are a bunch of my favorite resources that you can use to discover other hacks, tweaks, and clever little uses of tools Squarespace allows. 

40+ Tips and Tricks from My Billie Designs – This is a great post with a ton of tips and tricks, gathered from ten experts in Squarespace as a platform.  Some of them are covered above, like creating a blog sidebar, customizing your 404 pages, or creating a members-only area on your site.  Others are basic tweaks, like customizing your favicon and using summary blocks.  A few are more unique tips.  Check it out!

20 Squarespace Hacks from Cinnamon Wolfe – Cinnamon is a pro blogger and an expert in Squarespace.  She offers a bunch of useful hacks here, including:

-        Using the ESC key to log into your site.

-        Disabling right-click to protect your assets.

-        Customizing your site footer (and removing the “Powered by Squarespace” notice)

-        Tweaking comment functionality.

Some of her tweaks are pretty simple “this is how you use Squarespace” tips, while others are advanced features.  You’ll probably learn something new by reading through it!

50 Must-Have Plugins and Tweaks from SQSP Themes – Hey, that’s me!  This is another directory of useful plugins, hacks, and tweaks I wrote a while back.  There’s a little overlap here – it’s an older post and this one covers some of the same plugins – but there’s a lot of unique value in the older post as well.  Take a look, and let me know which one is your favorite.

30+ Tips and Tricks from Productive and Free – Productive and Free is a blog by Tet, a productivity coach.  Most of the tips and tricks on this list exist to help you tweak your site, publish content, and optimize your website’s SEO quickly and productively.  Get ready for a crash course in basic and intermediate Squarespace features; you’ll probably find something you didn’t know about before.

127 Examples of Sites Using Squarespace – This isn’t a tips and tricks article.  Rather, it’s a list of examples of high-quality websites built using Squarespace.  I like it because it’s a great way to see what other people are doing, what kinds of custom features they’re implementing, and what design styles they’ve put into practice.  In particular, it can give you inspiration for cool things you can do on your site, which you can then look up how to implement.

6 Advanced Tweaks to Increase Conversions – This post, from Sophia Ojha, isn’t nearly as long or in-depth as some of the others above.  It is, however, laser-focused on tweaks you can make to your site to increase conversion rates across the board.  Implementing these will give you some idea of how even little details can affect user conversion rates.

Your Favorites

That’s it for me; what about you?  Do you have any favorite tweaks, hacks, tips, plugins, or integrations I missed, but which you consider essential? 

I’d love it if you left me your favorites in the comments.  I’m always learning and growing as a Squarespace dev, and I can’t do that if I’m not learning from folks like you.  Thanks in advance!

5 Ways to Format Your Logo on Your Squarespace Website

You’ve decided on a site name and a brand name.  You’ve picked a template for your Squarespace site.  You’ve tweaked it to look exactly the way you want it.  There’s just one thing left; a logo!

A logo is a key part of modern branding.  There’s evidence that Google prefers sites that use graphical logos over sites with simple text.  Squarespace allows you to use a text site title just fine, but there’s a place for a logo, and it’s almost always a good idea to get one up and running.

Don’t worry too much about picking a final logo right away.  As a small site, you have the luxury of being able to change as you grow.  A company like Pepsi or Home Depot needs to make a big deal about changing its logo.  A small brand can pick a logo and, if it doesn’t fit the brand in a year, change it without issue.

My point is this: get a logo up and running!  Make one that looks decent and works as a placeholder, that you’re not upset at using, and call it good enough.  You can invest in a better one later if you want, but for now, a basic logo is better than nothing.

Squarespace has some quirks and interesting features of its logo system that are worth knowing.  Formatting a logo properly, for different forms and positions, is crucial.  Sure, you can just put up a square JPG file and call it good, but there’s a better way.

General Logo Formatting

First of all, it’s worth knowing that your site logo takes the place of your textual site header.  When you type in the name of your site, that appears under your site title.  However, you need to make sure to specify your site title anyway.  This is because your site title is what the image uses as alt text when you upload it.  Alt-text is hugely important for SEO and accessibility, so you don’t want something as important as your logo to lack it.

Another important note is that, on Squarespace, your logo will always link back to your homepage by default.  Now, 99.999% of the time, that’s what you want it to do.  Virtually every site on the internet makes their logo link back to their homepage, it’s just a standardized part of the internet these days.  However, if you wanted to do gimmicks with your logo or make it link to other pages on specific holidays or something, you have to do it with custom code.

Larger is generally better for the image you use for your logo.  However, that doesn’t mean you can upload a 100,000x100,000 pixel file as a logo.  Squarespace will scale your image file to fit the display area it is given in your site template.  This varies depending on your template on version 7.0 but is standardized across templates on 7.1.

An image that is too small will scale up, and that can make it appear pixelated.  Conversely, a larger image will be scaled down.  For simple, clean logos, this is fine.  For complex images, you can lose some detail.  Make sure your logo looks good at different scales!

Squarespace has some general requirements for images, including those used in logos.

• Only JPG, PNG, and GIF files are allowed.  You can’t use things like PDF, DOC, or PSD files.

• Your image cannot be larger than 20 MB.  However, since site speed is a search ranking factor and images are often the slowest part of a site, you should try to keep your files under 500kb.  Consider using an image optimization tool to smush down an image while keeping the quality.

• File names for images can only use letters, numbers, underscores, and hyphens.  You can’t use symbols like “?”, “&”, or “%”, and you can’t use accented characters, due to how the code on the back end works.

• Available resolutions are super high; 60 megapixels.  Your logo will probably not be even a single megapixel, so this shouldn’t be an issue.  This is of more concern for general images uploaded to your blog and product pages.

• The color mode for images is RGB.  CMYK images are generally for print, and won’t display properly on a browser without optimization.

• The ideal color profile is sRGB.  If you don’t know what that means, don’t worry about it; just about every image manipulation app you’ll use for your logo will export properly.

• Transparent backgrounds are allowed (so you don’t have to match colors to your site background color), but you need to use a PNG file to save with transparency.

I have a bunch of details, quirks, and exceptions to go over later in this post, but for the most part, this is all you’ll need to worry about.

Creating a Logo Image

Creating your logo is a daunting task, especially if you’re not a graphic designer.  Luckily, it’s not actually all that difficult.

While you can use Photoshop or your favorite image editor to produce an image, you can also just use Squarespace Logo.  Squarespace Logo is an online tool Squarespace offers, that lets you make a logo out of nothing.  You type in your brand name, your tagline, and choose a symbol to add.  Positions, fonts, colors; you can choose all of that for each element.  The symbol library looks small at first glance, but type anything you want in the search bar and dozens more will show up. 

If you find Squarespace’s generator to be a little simplistic or lacking in the design you want – or if you want something more AI-generated, or more custom – you can use a different logo maker.  There are a lot of different services out there that allow you to put in a brand name, some keywords, and some other details, and will generate a huge pile of logos you can pick through. 

And, of course, there’s always the option to use a service like Canva to create one from scratch with a larger library of custom elements.

Site Header Logo Picture

Adding your logo image is easy.  Once you have an appropriate file chosen, you can follow these steps depending on your site version and your platform.

For 7.1 on a computer, click Edit, then hover over the header and click Edit Site Header.  Click “Site Title & Logo”, make sure the text is specified, and then drag-and-drop your logo image into the image box. Alternatively, click the box and choose the file.  You can scroll down and change the image height for responsive screens.  Make sure to save.

For 7.0 on a computer, hover over your logo on any page and click edit.  Alternatively, go to the home menu, click design, and then logo & title.  Upload your image, and save it.

For either, using the Squarespace App, tap settings, then logo & title.  Tap the logo, then upload your image.  Tap back, then save.

Your logo will change in appearance and layout depending on your template.  Every 7.0 template has a different way to display the logo, and a different method for changing it, if you can change it at all.  For example:

• Avenue – Logo can display left, center, or right.  You can change this using the Layout Style tweak.

• Bedford – The logo only displays on the left and cannot be changed.

• Momentum – The logo is on the left, but can be above or below the navigation bar.  Use the Navigation Position tweak to change this.

You can read the differences for each set of templates here.

Logo Size Options

When you initially upload a logo to your site, it may be dramatically off in how big you want it to display.  Now, you can go in and edit the image so it’s exactly the right size to fit the space.  Unfortunately, this means you’ll need a bunch of different logo files for different display modes, and since you can only upload one logo, it doesn’t quite work out.  Luckily, Squarespace allows you to set the size.

Go into your style editor, and find the section for your logo image size.  It’s under the Header Branding section.  You have to specify the width of your logo, and the height will be generated based on the dimensions of the image you uploaded.  It won’t skew the image, so don’t worry about that.  Just keep in mind that images that are too tall will stretch out your page. 

If you don’t mind your image skewing, or you want to set a maximum height just to make sure, there are some CSS tweaks you can make.  You need to find the CSS image class for your template, so go to your site and right-click on your logo, then inspect the element.  You should be taken right to it.  Then you can paste in some relevant CSS in your site code, following the instructions on this page.

Logo size is really easy to edit on a 7.1 site.  Just go into your site header editor and specify the dimensions there.  Boom, you’re done!

Logo Text Options

If you don’t upload an image, you get text styled to match your site design, in place of a logo.  If you upload an image, you get the image, but the text becomes alt text.  What happens, then, if you want a logo with text, something like TinySeed or BeAligned?

Well, if you inspect their logo, you see the trick.  They make the image contain the text.  So, all you need to do is produce your logo with text in the image. 

The tricky part here is making sure it’s the right size and fidelity to avoid blurring when it’s scaled for different versions of your site.  A large image with text that is not overly thin or intricate is the way to go.  I can’t give you too many specifics because it all comes down to your font choice, style, and size.  Try not to make your initial image too big and you should be fine when it scales.

Favicon Formatting

A favicon, also known as a browser icon, is the symbol that appears in the tab your site is loaded in, on both mobile and desktop browsers.  It’s essentially a tiny version of your logo.  However, if your logo is larger, more complex, or uses text, it doesn’t fit right in a favicon.  How do you produce a good favicon?

First, you should know that the image specifications for the favicon are different than a logo.

• Favicons display at 16x16 pixels, but you generally want to upload a larger image, typically between 100x100 and 300x300.  Favicons are always square or circular, so rectangles don’t work well.

• You should generally use a PNG or ICO file.  PNG doesn’t work with really old versions of internet explorer, but I’ve never had a problem with it.

• Your file needs to be small. Under 100kb small.

Adding your favicon is simple, at least.  In 7.1, click on your home menu, then Design, then Browser Icon. 

Upload your image there and save it.  On 7.0, click on the home menu, then Design, then Logo & Title.  The browser icon will be further down on the page.

Upload it and save.

Using an SVG Logo

If you’re aware of vector graphics, you might wonder if you can use an SVG file for your site logo.  SVGs are essentially text instructions for creating a vector-based image that scales infinitely well.  They’re very powerful, very lightweight, and not true image files as we traditionally know them.  Unfortunately, Squarespace doesn’t support them by default.  However, you can still use them if you want.

To do this, you essentially need to trick Squarespace into loading the SVG using custom code. 

First, replace your header logo image with a transparent PNG file of the right size you want the header image to be.

Next, create your SVG logo.  Here’s a guide on how to do it.

Once you have your SVG, you need to upload it.  On any page of your site, highlight some text and click the link icon.  Instead of linking to a page, click to link to a file, and upload your SVG file.  This is basically a workaround for uploading your file to the Squarespace servers, as it doesn’t require any extra software and is a pretty quick process.

Once your logo file is uploaded, click the link to get the file name.  It will look like this:

https://yoursitename.com/s/svglogoname.svg

Sometimes it can have a long file name, such as:

https://static1.yoursitename.com/static/605d8c67275bb80d4f-1b1fcb/t/602e9274f59cb32c9e67195c/1613265654987/file-name.svg

That’s fine.  Copy that and set it aside.  You can delete the link to the file, you don’t need to save it on whatever page you created it.

Next, use some custom code to add CSS to your header.  The exact code you need depends on your site template, so I can’t list them all.  Just search for “SVG logo in template name” to find a guide, like this one for Brine.  Make sure to do the same for your mobile logo as well.

That’s it!  You’ll have a perfectly scaled SVG logo all ready to go.