CORE MODULE

Add a Favicon

What you'll learn in this guide

Learn how to add a favicon in the Receive module so your published forms display a recognisable browser icon for a more consistent branded experience.

Overview

A favicon is the small icon that appears in the browser tab when someone has your form open. By default, published forms display a generic browser icon. Adding your own favicon replaces this with your organisation's brand mark — a small detail that makes the experience feel more polished and consistently branded.

Favicons are added via a <link> tag in the form's header HTML. You can add one globally to all forms via the Default survey header HTML in Edit settings, or to a single form via the Custom Header field in the form template's Custom HTML/Javascript tab.

‍

Step 1 — Upload your favicon to the Send module

Your favicon image needs to be hosted at a publicly accessible URL. CX Platform uses the Send module's asset library for this — upload your favicon file there and copy the hosted CDN URL to use in the next step.

  • Recommended format: .ico for broadest browser compatibility, or .png (32×32px or 16×16px) as a modern alternative.
  • Size: 32×32px is the standard. Browsers scale the image anyway, but starting at the right size avoids blurriness.

To upload the favicon to the asset library:

  1. In the Send module, open the Application you use for hosting shared assets, or create a dedicated one for this purpose.
  2. Go to the Templates tab inside the Application and open or create a template to access the asset area.
  3. In the template editor, open the asset/image manager and upload your favicon file.
  4. Once uploaded, copy the full CDN URL for the favicon file — it will follow the pattern https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/favicon.png. You'll paste this URL into the link tag in Step 2.

‍

Step 2 — Add the favicon link tag

Once you have the hosted URL, add a <link> tag referencing it. The tag goes in the header HTML — either globally or at the template level.

<link rel="icon" type="image/png" href="https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/favicon.png">

‍

For an .ico file, use type="image/x-icon" instead:

<link rel="icon" type="image/x-icon" href="https://yourtenantname-cdn.cxengine.com.au/resources/yourapp/t/1/favicon.ico">

‍

Option A — Apply to all forms (recommended)

Adding the favicon to the Default survey header HTML means it applies automatically to every published form in your tenant without any per-template configuration.

  1. In the Receive module, click Edit settings under Receive settings.
  2. Scroll to the UI section and click View next to Default survey header html.
  3. Add your <link rel="icon"> tag alongside any existing content (such as your font link tag).
  4. Click Save.

‍

Option B — Apply to a single form

If you only want a custom favicon on one specific form template, add it via the template's Custom Header field instead.

  1. Open the form template and click the Custom HTML/Javascript tab.
  2. In the Custom Header field, add your <link rel="icon"> tag.
  3. Click Update, then Publish.
‍Browser caching: Browsers cache favicons aggressively. If you don't see your favicon update immediately after saving, try a hard refresh (Ctrl + Shift + R on Windows or Cmd + Shift + R on Mac) or open the form in a private/incognito window to see the latest version.

‍

Once saved, the favicon will appear in the browser tab for any user who opens your published forms. It's a small touch — but it's the kind of detail that makes a form feel like it belongs to your brand rather than a generic platform.

‍