Free Tool

Favicon Generator

Create a favicon for your Squarespace site in seconds. Choose from text, emoji, or simple shapes — no design skills needed.

Why this matters

That tiny icon in the browser tab? It's called a favicon, and it's one of the first things that makes your site look professional (or not). This tool creates one from a letter, emoji, or shape in seconds — no Photoshop needed.

My Site✕
mysite.squarespace.com
16x16 preview

16×16

32x32 preview

32×32

48x48 preview

48×48

180x180 preview

180×180

Pro

Unlock download all favicon sizes

HTML Tags

Add these tags to your site's <head> section for full favicon support across browsers and devices.

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

How to Add a Favicon in Squarespace

Step 1

Browser Icon (Favicon)

Go to Design → Browser Icon in your Squarespace admin panel. Upload the favicon-512x512.png file. Squarespace will automatically generate the smaller sizes from it.

Step 2

Social Sharing Icon

Go to Design → Social Sharing and upload the favicon-512x512.png as your default sharing image. This appears when your site is shared on social media.

Step 3 (Optional)

Apple Touch Icon via Code Injection

Squarespace does not natively support Apple touch icons. To add one, go to Settings → Developer Tools → Code Injection and paste this tag into the Header section:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

You'll need to upload the apple-touch-icon.png (180×180) file to your site's root directory by hosting it externally or using the file manager in your Squarespace admin. Alternatively, upload it to your site files and use the full URL in the href attribute.