Skip to main content

​
Overview

The favicon is the small icon shown in the browser tab, bookmarks, and history next to your portal’s page title. By default, the Members Portal uses your location’s logo as its favicon. To use a dedicated favicon instead, upload the icon to your file drive and reference it from head.js in the Web Template Editor.
Prepare your favicon as a 32×32 pixel PNG file before you start. Smaller files and simple, high-contrast designs work best at this size.

​
Add your favicon

1

Upload the favicon image

Go to Settings > Website > Web Template Editor and, under File drive in the left-hand panel, select Image files. Add a new image and upload your 32×32 favicon, e.g. fav.png.Leave Display this image on the home page and ‘about us’ gallery unticked. That option adds the image to your public image gallery, which you don’t want for a favicon.
2

Copy the image URL

Once the image is saved, open it again and copy the URL shown in the form. It looks like this:
The double slash before images is expected and the URL works as-is. You can keep or remove the ?cache=… part. Keeping it means browsers fetch the new image if you replace the file later.
3

Open head.js

In the Web Template Editor, expand the Built-in files folder in the left-hand panel and click head.js.
4

Remove the default commented-out content

A new head.js contains a commented-out example wrapped in /* … */. Delete everything in the file, including that comment block.head.js must contain valid JSON only. JSON does not support comments, so if any comment remains, the whole file is ignored and none of its elements, including your favicon, are added to the page.
5

Add the favicon element

Paste the following into head.js, replacing the href value with the URL you copied:
If head.js already contains other elements, add the favicon object to the existing array rather than creating a second array.
6

Save

Click Save. The favicon is applied on the next portal page load.
When you’re done, head.js contains only the JSON array, with no comments:
head.js open in the Web Template Editor, containing a single link element for a 32x32 favicon
Your favicon then appears in the browser tab next to the page title:
Members Portal in a browser tab, showing the custom favicon next to the page title

​
Troubleshooting

​
The favicon doesn’t appear

  • Check for comments. Make sure no /* … */ or // comments remain anywhere in head.js.
  • Validate the JSON. Look for trailing commas after the last property or object, missing quotes around keys or values, and unbalanced brackets. If the JSON is invalid, the portal ignores the file without showing an error. Note that the commented-out example in a new head.js contains a trailing comma, so uncommenting it does not produce valid JSON.
  • Check the file you edited. The JSON array goes in head.js, not app.js. app.js runs JavaScript, so pasting the array there has no effect.
  • Check the image URL. Open the href URL directly in a browser tab to confirm the image loads.

​
The old icon still shows

Browsers cache favicons aggressively. Hard-refresh the page or open the portal in a private window to see the new icon. If you replaced the image file, update the ?cache=… value in the URL, or add one, so browsers fetch the new version.