Squarespace Guide: Customise Favicon for Light and Dark Browser Modes
A lot of users will access your website in dark mode which means if you have a dark logo, it’s not going to show up against their dark browser background.
Squarespace has finally listened to the community and launched a new update that allows you to set two different favicons for your website, one for users in light mode and one for those in dark mode.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
To change your light and dark browser icons, within your main edit dashboard head to Settings > Favicon.
Here you’ll see you have two favicon options for your website, one for default and one for dark mode.
Hit the + icon and upload the file you want to use for your dark mode browser icon. Remember it will need to be light, preferably white, so that it stands out against the dark browser settings.
Once you’ve uploaded the icon, hit save and you’ll have set a new favicon for dark mode users. Easy!
This is a super simple Squarespace hack but one that is really handy to be able to implement on your website.
For more Squarespace tricks check out my Squarespace resource centre.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
