A favicon, short for “favorite icon,” is a small icon associated with your website. Your favicon will appear in various places such as search results, search history, browser tabs, or bookmark lists and serves as a visual representation of a website.
Is your Squarespace favicon not working? Not showing up in Google search results? 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.
To learn more about favicons in general, see our article on favicon best practices and SEO which includes favicon examples.
How to Add/Change a Squarespace Favicon
Squarespace default cube favicon
Image credit: Squarespace
If you don’t add a custom favicon to your Squarespace website, the site will use the platform’s default favicon—a dark cube icon. Using the default cube image will not help your brand differentiate itself. Adding a favicon to Squarespace is easy, so we recommend taking this step.
Add a favicon to Squarespace 7.0 or 7.1 with these 3 steps:
Open your Browser Icon Panel.
Upload your image(s). See below for how to make a favicon.
Click Save.
For ideal SERP display, we also recommend making sure your Squarespace site title is properly set.
How to Create a Favicon
To make a favicon for Squarespace, you can use a tool such as Canva (select create a design > custom size, 96x96px) or a free favicon generator. If you want to resize or compress an image file, see the online 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, but 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.
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 (not all) favicons to 100x100—you can check your source code if curious. This said, the resized favicons do not cause a problem, meaning this is not the source of any issue you might be having.
Note, 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. Then, add your favicon to Squarespace.
Remember: Test your favicon(s) in light and dark mode, and on different browsers like Chrome and Safari.
Troubleshoot Squarespace Favicons
Favicon not showing in Google Search
If you see the Squarespace box icon: More than likely your domain is new and you just need to be patient. In 2023, we saw an increase in questions about favicons, this was associated with Google’s change to show site names and favicons in desktop search. This visual change to search results made DIY site owners much more aware of favicons. It is worth mentioning that Squarespace made changes to how they process favicons around the same time as the Google change (see above regarding Squarespace favicon sizes).
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 Home page 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 does not display favicons for Squarespace sites
In DuckDuckGo search results, in place of a brand icon, you’ll see a generic gray circle with a white caret. We reported this to Squarespace in 2020 and to DuckDuckGo in 2021 and hoped the platforms might collaborate to work it out. As of Q1 2024, there’s still no resolution. Learn more about favicons on DuckDuckGo.
Apple Touch Icons on Squarespace
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, then 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.
