avicon

Changing the Favicon on Webflow, Squarespace, Wix and Ghost

Where the favicon setting hides in each platform, what size each one wants, and how to add the icons the built-in uploader doesn't cover.

By Abdessamad Bettal · 6 min read

Quick answer: all four platforms have a favicon uploader in their settings rather than a place to edit <head> directly — Webflow under Site settings → General, Squarespace under Design → Browser icon, Wix under Settings → Favicon, Ghost under Settings → Publication identity. Upload a square PNG of at least 512×512 and let the platform generate the smaller sizes. Where they fall short is the iOS touch icon and the web manifest, and the workaround differs for each.

Hosted platforms handle the common case well and give you no control over the edge cases. This guide covers both: where the setting is, and what to do about the icons the uploader doesn't produce.

Before you start: one good source file

Every platform below wants a square image and will downscale it. Give all of them the same thing:

  • PNG, 512×512 or larger, square.
  • A solid background, not transparency. iOS fills transparent areas with black, and several of these platforms composite onto white, so a transparent icon gives you inconsistent results across surfaces you can't test.
  • No pre-rounded corners. Every platform that rounds will round again.
  • A simple mark, not your full horizontal logo. A wordmark scaled to 16 pixels is an unreadable smear. Use the symbol, a monogram, or a single letter.

If your logo is a wide lockup, the Converter will take it and let you set padding and a background so the mark sits correctly in a square canvas, then export the full set. Upload the 512px PNG from that export to whichever platform you're on.

Webflow

Site settings → General → Favicon & Webclip.

Webflow asks for two files, which is more honest than most:

Field Size Used for
Favicon 32×32 Browser tabs
Webclip 256×256 iOS home screen (apple-touch-icon)

Upload both — the Webclip field is the apple-touch-icon, and skipping it means iOS falls back to a screenshot of your page. You can upload larger images than the stated sizes and Webflow will handle them.

Then republish. This is the step people miss. Changing a site setting doesn't update the live site until you publish, and Webflow's favicon changes in particular are easy to make and forget.

What Webflow won't give you: a web app manifest, and therefore no Android install icons or maskable icon. If you need those, add the manifest link through Site settings → Custom code → Head code:

<link rel="manifest" href="https://your-cdn.example.com/site.webmanifest">

The manifest and its icons have to be hosted somewhere you control, since you can't add arbitrary files to a Webflow site's root. This is a real limitation, not a workaround anyone enjoys — for most marketing sites it's also not worth solving.

Squarespace

Design → Browser icon (in some versions: Settings → Website → Browser icon).

Squarespace takes a single square image, recommends at least 100×100, and generates what it needs. Give it 512×512 anyway; there's no downside and it future-proofs the upload.

Squarespace generates an Apple touch icon from the same file, so iOS is covered without a second upload.

The version trap: Squarespace 7.0 and 7.1 put this setting in different places, and older 7.0 templates sometimes have a template-level icon setting that overrides the site-level one. If you've changed the browser icon and the old one persists after a hard refresh, look for a second setting in your template's style panel before assuming it's a caching problem.

Custom code alternative: on Business plans and above you can inject header code, so you can declare additional icons yourself — but the files still need external hosting, with the same caveat as Webflow.

Wix

Settings → Favicon in the site dashboard (not the editor).

Wix wants a square image and recommends PNG. The setting lives in the dashboard rather than the drag-and-drop editor, which is the main reason people can't find it — searching the editor for "favicon" turns up nothing useful.

Two Wix-specific notes:

  • Free sites don't get a custom favicon. On a free plan your site shows the Wix icon. This is a plan restriction, not a bug, and no amount of uploading will change it. You need a paid plan with a connected domain.
  • Publish after changing it. Same as Webflow: the dashboard change doesn't reach visitors until the site is published.

Wix generates the touch icon for you. There's no manifest control.

Ghost

Settings → General → Publication identity → Publication icon.

Ghost accepts a square PNG or ICO, at least 60×60, and recommends 512×512. It generates the sizes it needs and handles the Apple touch icon.

Ghost is the most flexible of the four because themes are real files you can edit. If you want the full modern set, put your generated files in the theme's assets/ directory and add the tags to default.hbs:

<link rel="icon" href="{{asset "favicon.ico"}}" sizes="32x32">
<link rel="apple-touch-icon" href="{{asset "apple-touch-icon.png"}}">
<link rel="manifest" href="{{asset "site.webmanifest"}}">

One thing to know: Ghost's own {{ghost_head}} helper outputs an icon link based on the Publication icon setting. If you also hand-declare icons, you'll have two sets of declarations and the browser will pick between them. Either leave the Publication icon empty and own the tags yourself, or set it and don't hand-declare — mixing the two is how you end up with an icon you can't explain.

"I changed it and nothing happened"

This is by far the most common follow-up, and on hosted platforms it's almost always one of four things. Work through them in order:

  1. You didn't publish. Webflow and Wix both require a publish step. Squarespace saves live. Check this first because it costs nothing.
  2. The browser cached the old icon. Favicons are cached far more aggressively than other assets, and an ordinary refresh usually won't replace one. Test in a private window, or on your phone over mobile data — a device that has never seen the old icon gives you the true answer in seconds.
  3. A CDN is still serving the old file. These platforms sit behind their own CDNs and can hold an old icon for a while after the setting changes. Waiting an hour genuinely is the fix here.
  4. There's a second declaration you forgot about. Custom code you added months ago, a theme setting, or an app/plugin injecting its own icon tag. The browser sees two valid icons and picks one.

For that last case, run your live URL through the Checker. It reads the served HTML and lists every icon declaration it finds, so you can see whether the platform is emitting one icon or three — which is the difference between a caching problem and a configuration problem, and worth knowing before you spend an afternoon clearing caches.

What you give up, and whether it matters

Hosted platforms cover browser tabs and iOS home screens. What they generally don't cover:

  • A web app manifest with Android and maskable icons. Matters if people install your site to an Android home screen. For most marketing and content sites, they don't.
  • A multi-resolution favicon.ico at the site root. Platforms typically serve a PNG. Fine for browsers; occasionally means an RSS reader or link unfurler that only looks for /favicon.ico shows nothing.
  • An SVG icon for crisp scaling and dark-mode adaptation.

If those matter enough, that's a real argument for a static site or a framework you control. If they don't — and for a lot of sites they genuinely don't — upload a good 512px square, publish, and check it in a private window. That's the whole job.

Try the Converter

Already have a logo, icon or PNG? Drop it in, adjust the background and padding, and download a complete favicon package — .ico, PNGs, Apple touch, manifest and the HTML snippet.

Open Converter

Written by Abdessamad Bettal

Web developer, and the person who builds and writes favicon.tools. The ICO packer, manifest writer and site checker behind favicon.tools were all written from the file-format specs and tested against real browsers — which is where the detail in these guides comes from. Spotted something wrong? Write to contact@favicon.tools.