Guide

Adding a favicon to WordPress, Shopify and Squarespace

Last updated 1 September 2026

All three platforms accept a favicon, but only one of them lets you upload the full set. Here is the actual path on each, and what each one silently does to your file.

WordPress

WordPress calls it the Site Icon. Go to Appearance → Customize → Site Identity, or in newer block themes Settings → General. Upload a square PNG of at least 512×512.

WordPress then generates its own sizes from that upload and injects the link tags for you. This is convenient and slightly lossy: you lose control over how the small sizes are downsampled, and you do not get an ICO or an SVG. If your icon is fine detail or type, upload the 512 PNG from your package rather than a large logo, since it has already been optimised for small rendering.

To use the complete set instead, upload the files to your site root by FTP and add the link tags to your theme's header via a child theme or a plugin that injects code into <head>. Editing the parent theme directly gets overwritten on update.

Shopify

Shopify has a built-in field: Online Store → Themes → Customize → Theme settings → Favicon. Upload a PNG; Shopify resizes to 32×32 and serves it from its CDN.

That single 32 pixel file is all the built-in field gives you — no Apple touch icon, no Android icons, no manifest. To add the rest, upload the files under Content → Files, copy each CDN URL, and paste link tags into theme.liquid just before </head>. Note that the URLs will be Shopify CDN paths, not /favicon.svg, so paste the URL Shopify gives you into each href.

Squarespace

Design → Browser Icon on 7.0, or Website → Website Tools → Browser Icon on 7.1. Upload a square image, ideally 100×100 or larger.

Squarespace handles the tab icon and nothing else. For the Apple touch and Android icons you need Settings → Advanced → Code Injection and the link tags in the header field, with files hosted somewhere you control — Squarespace does not give you a writable site root.

The pattern across all three

Every hosted platform gives you a one-field favicon uploader that handles the browser tab and stops there. That covers the most visible surface, and for many sites it is genuinely enough. The remaining files matter when people save your site to a phone home screen — that is where a missing Apple touch icon shows up as a blurry screenshot of your page instead of your logo.

Whatever you do, verify it

Favicons cache aggressively. After uploading, hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on a Mac), and if it still looks stale open the icon URL directly in a tab. A 404 there means a path problem; the old icon means a cache problem.