A favicon, short for “favorite icon,” is a small icon associated with your website. Favicons appear in various places such as search results, search history, browser tabs, or bookmark lists and serves as a visual representation of a website.
Squarespace default favicon
Image credit: Squarespace
On Squarespace, if you don’t add a custom favicon your site will use the platform’s default favicon—a dark cube icon. Using the default cube image does not help your brand differentiate itself. Adding a favicon to Squarespace is easy, so we recommend taking this step.
This article covers common questions and issues specific to Squarespace favicons. We also look at proper sizing and how to implement an Apple Touch Icon.
How to Add or Change a Squarespace Favicon
Add a favicon to either Squarespace 7.0 or 7.1 with these 3 steps:
Open your Favicon Panel, located under Settings > Website > Favicon.
Upload your image(s). If needed, see below for how to make your favicon. Also see our article on favicon best practices which includes both good and poor examples.
Click Save.
For ideal SERP display, we also recommend making sure your Squarespace site title is properly set.
How to Create a Favicon
To quickly make a favicon, you can:
Use a tool such as Canva (select create a design > custom size, 96x96px)
Or search for a free favicon generator
To resize or compress an image file, try the tool Squoosh
Our recommendation: Design for visibility and consistent branding. A simple shape, symbol, or letter that’s easily identifiable will offer the most visual impact. And the colors and design of your favicon should align with your brand’s logo, colors, and overall aesthetic. Before making a favicon, refer to favicon examples from larger companies to learn what works and what doesn’t.
Squarespace Favicon Size and Format
What size favicon and format should you use?
Squarespace literature suggests 100x100 to 300x300px
Google says to use a multiple of 48px square: 48x48px, 96x96px, and so on.
We’ve seen a wide variety of favicon sizes on Squarespace work just fine, but we suggest following Google’s preference.
Note that even if you upload a Google-preferred size, Squarespace might resize your favicon. Historically, the platform resized all uploaded favicons to 100x100 pixels, then in Q2 2023 the platform stopped this practice. But by Q3 2023, they were back to resizing some, but not all, favicons to 100x100—you can check your source code if curious. However, the resized favicons do not cause an issue, meaning this is not the source of any problem you might be having.
Squarespace no longer accepts ICO format, rather they convert uploaded favicons to ICO. And you can now upload a second favicon specifically for dark mode, but this is optional based on your design choices.
Our recommendation: Create a PNG file with a 1:1 aspect ratio, following Google’s latest size preference, i.e. 96x96px. Check out (good and bad) favicon examples so that you know what to expect based on your color choices. And remember to test your favicon(s) in light and dark mode, and on different browsers like Chrome and Safari.
Troubleshooting
Favicon not showing in Google Search
If you see the Squarespace box icon: Verify that you’ve uploaded a favicon to your site. If your domain is new, you need to be patient.
If you see the Google globe: This means there is an issue with your uploaded icon. For example, we’ve seen where sites uploaded a white icon against a transparent PNG background. This would not be visible in the SERPs, so Google displayed their default globe icon instead.
What to do? If your Squarespace favicon is not working, make sure the favicon is visually optimized, keep the favicon URL stable, give the process some time, and you should be fine. That said, if a favicon does not display within a month of launch, we can help diagnosis the issue in a 30-minute Zoom.
Favicon not updating
If you change your favicon, ask Google to recrawl your site’s homepage via Google Search Console. Google states: “Updates can take a few days or longer to appear in search results.” Remember, favicons may be cached by browsers, so changes to the favicon may not be immediately reflected for all users.
Safari tabs show white letter on gray background
If your favicon is not showing up on Safari tabs, this is a caching issue. Clear your history, refresh the page, and the icon should show.
DuckDuckGo not displaying favicon
In DuckDuckGo search results, in place of a brand icon, you’ll often see a generic gray circle with a white caret. We reported this to Squarespace in 2020 and to DuckDuckGo in 2021. Finally in 2024, some Squarespace sites see their favicon on DDG, but some sites do not. Learn more about favicons on DuckDuckGo.
Apple Touch Icons
An Apple Touch Icon is used when users add your site to their iOS device home screen. Without a specified Apple Touch Icon, your website icon will show as a condensed, unrecognizable version of one of your web pages. But if you upload a PNG image and add a simple line of code, your users will see your brand icon on their iOS device.
The recommended size for Apple devices is 180x180 pixels and the icon cannot have transparency. But note, as with favicons, we’ve seen a variety of file sizes work as expected on iPhones and iPads. If needed, you can use a simple tool like Canva (create a design > custom size) to convert a transparent favicon into one with a solid background.
Ideally, Squarespace would make this basic functionality available for all users, but currently you have to do it manually.
Our recommendation: If your website will be bookmarked by users, and if your Squarespace pricing plan allows for custom code, add an Apple Touch Icon to your site: upload a 180x180px non-transparent PNG image via your CSS editor, find the image URL, and inject this line of code:
<link rel="apple-touch-icon" href="your-image-url">Need favicon help?
We can help in a 30-minute Zoom session.
