Easy Tech TutsHow to Add Icons to Your Website in Squarespace, Browser Icon, Logo Change 2026 Easily
By Impran M N
Your logo and your browser tab icon are two small details, but they're often the first two things a visitor notices — one sits in your header on every page, the other sits in their tab bar the whole time your site is open. Squarespace handles both from the same general area of the dashboard, though they're set up in slightly different places: the logo through the site header editor, the favicon through a quick search. This guide follows the real dashboard screens for both, from the setup checklist you land on after logging in through uploading the image and sizing it correctly.
01Start from your site's home dashboard
After logging in and picking your site, you land on a home dashboard built around a setup checklist — things like "Personalize your site header and logo," "Customize your brand style," and "Modify SEO for search." A card on the right shows your site's current homepage preview along with its domain and buttons to manage the domain or publish the site. If your logo and icon still need setting up, "Personalize your site header and logo" is the direct link into that editor.
02Open the site header editor
Clicking into header personalization drops you into Editing Site Header mode, with a Content panel on the left. Here you'll find your Site Title field and, below it, a Logo Image uploader — a simple box with a plus icon labeled "Add logo" and a 20 MB size limit. Squarespace notes right on this panel that a logo replaces the site title everywhere it appears, and that search engines still read the site title text even when a logo image is showing, so it's worth keeping the title field accurate regardless.
03Upload the logo and set its size
Once you upload an image file, the same panel updates to show it in place of the "Add logo" prompt, along with two sliders: Logo Height and Mobile Logo Max Height, each defaulting to a modest size like 50px and 30px. Drag these to fit your header comfortably — too large and it crowds the navigation links next to it, too small and it disappears against a busy background image. The header preview updates live as you adjust, so you can judge the balance before saving.
04Find the favicon setting through search
The browser icon lives in a different part of Squarespace than the logo, and the fastest way to it is the built-in dashboard search rather than hunting through Design menus. Click the search icon near the top of the sidebar and type "favicon" — Squarespace surfaces a direct result labeled "FAVICON: Adjust your site's favicon," which takes you straight to the setting without navigating through several nested screens.
05Upload an image that meets the favicon requirements
The favicon screen expects a square image, at least 100 by 100 pixels, saved as PNG, ICO, JPG, or SVG. A simplified mark or initial usually reads better than your full logo at this size, since the browser tab renders it at only a handful of pixels. Upload the file and save — Squarespace applies it as the icon shown in browser tabs, bookmarks, and history entries for your site.
06Save, clear your cache, and confirm both are live
Save your changes in the header editor and the favicon screen separately, since they're two distinct settings even though they're both branding. Browsers cache favicons aggressively, so if the tab icon doesn't update immediately, clear your browser cache or open the site in a private window to see the current version. Once both show correctly, your header and browser tab are carrying consistent branding across the site.
Frequently asked questions
What image format should I use for a Squarespace logo?
A high-resolution PNG or SVG works best, since both preserve transparency and stay sharp at different header sizes, up to the 20 MB upload limit.
Why isn't my new favicon showing up?
Browsers cache favicons aggressively. Clear your cache or open the site in an incognito or private window to see the update take effect.
Does the favicon need to be a specific size?
Squarespace requires a square image at least 100 by 100 pixels, saved as PNG, ICO, JPG, or SVG.
Can I use the same image for both the logo and favicon?
You can, but since the favicon displays very small in the browser tab, a simplified icon version of your logo usually reads more clearly than the full logo at that size.
I can't find the favicon setting in the menus — what's the fastest way?
Use the search icon in the dashboard sidebar and type "favicon." Squarespace surfaces a direct shortcut to the setting instead of requiring you to navigate through Design menus.
About the author
Impran M N
I've been hooked on technology for as long as I can remember — especially the new tools and AI apps that seem to land every other week. Easy Tech Tuts is where I write up whatever I've just worked out: I do the task in the real product, record the screen, and turn it into the guide I wish I'd found first.
