Adding A Custom Browser Icon (Favicon) To Your Squarespace Website

Adding a custom favicon, which is that little icon that shows up next to your website title on a browser tab, is one of the custom touches that can make your website special. It's also one that many Squarespace users overlook. Fortunately, it's super easy, and these tips and instructions will help you create and add a custom favicon to your site in less than 5 minutes!

Step 1: Tips For Designing Your Favicon

The favicon will be super small so it needs to be simple enough so that it is clear at that size. We recommend using something that ties in with the rest of your branding, and can stand alone as an icon of your site. Some awesome examples are the favicons of the top social media sites. The same icons you see next to the names Facebook, Twitter, Pinterest, and Instagram are also their mobile app icons and the universally used sharing button for their sites. They are not a random design, but a known asset of the brand. If you don't have a icon for your brand, like Facebook, we recommend using the first letter of your business name. You can even screenshot it from your website if you want to save time, then convert the file using the next step.

Step 2: Creating A Custom Favicon File for All Browsers

Not all browsers are made alike, so the best way to ensure your icon will translate is to save it in the .ico format. You can do this in less than two minutes on ICO Convert. All you need to do is upload the Jpeg or Png of your design, select favicon for your website, and hit convert. The video below shows this process.

Step 3: Uploading A Favicon To Squarespace

The last step is to of course upload your favicon to your Squarespace site. You can do this by going to Design > Logo & Title and uploading it to the BROWSER ICON (FAVICON) box. You can also follow along with the video below.

If you have any questions about adding favicons to your Squarespace site, you can comment below or get in touch. Happy designing!


Share The #squarespaceMagic