Written by David Kim — Frontend Developer & WordPress consultant. More about me →
I maintain about 40 client sites spread across WordPress, Shopify, and Squarespace. Every platform has its own favicon upload process, and every one of them buries it in a different menu. Here's exactly where to click, with the screen-by-screen paths so you don't spend 10 minutes hunting.
Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 PNG. WordPress will auto-generate all smaller sizes. This has been the most reliable workflow across 30+ sites I manage. Use GenFavicon to generate a 512×512 PNG first.
Common mistake: Uploading a .ico file to WordPress. The Site Icon feature expects a PNG. If you upload an ICO, it either rejects it or crops it weirdly. I learned this after a client's 16×16 favicon got stretched to 512×512 and looked like 8-bit pixel art.
Online Store → Themes → Customize → Theme Settings → Favicon. Upload a 32×32 PNG. Shopify is picky about size — it won't resize for you. Generate exactly 32×32 from GenFavicon and upload that.
Common mistake: Forgetting to hit Save on the theme settings. Shopify's theme customizer has a separate Save button in the top-right that's easy to miss after uploading. I've had three clients upload a favicon, close the tab, and wonder why it didn't show up.
Settings → Website → Browser Icon. It wants a file between 100×100 and 300×300. Squarespace auto-scales, so any size in that range works. Unlike Shopify, it actually resizes properly.
Common mistake: Squarespace has two icon fields — "Browser Icon" (favicon) and "Social Sharing Logo" (og:image). They're on the same page and people mix them up constantly. The favicon is the top one.
Site Settings → Favicon & Web Clip. Upload a 256×256 PNG. Webflow generates the rest. Also accepts SVG directly — the only platform on this list that does.
If you have FTP or file manager access to your site's root directory, just upload the PNG files directly and add this to your <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
This works regardless of what platform you're on. No CMS can override a correctly-placed <link> tag in the actual HTML. I keep this as my fallback for platforms with broken favicon uploaders (looking at you, Wix).
Written by David Kim — Frontend Developer & WordPress consultant. More about me →