Changing the favicon in the NextGen Builder via JS

API & Custom Code Show & Tell
1

Custom JS is now available in the NextGen builder - yippee!

It means you can now change the favicon for your app dynamically …. actually no, the previous code posted in this community doesn’t work, because there are multiple instances of the favicon code in the head that need changing.

So….. to fix this, I wrote a version (with the help of Copilot, I admit) which removes all favicon instances from the code and then adds your one. Enjoy!

const changeFavicon = (link) => {
  const selectors = ['link[rel="icon"]', 'link[rel="shortcut icon"]'];

  // Remove all existing favicon elements
  selectors.forEach((selector) => {
    document.querySelectorAll(selector).forEach((el) => el.remove());
  });

  // Create and append the new favicon
  const newFavicon = document.createElement("link");
  newFavicon.rel = "icon";
  newFavicon.href = link;
  newFavicon.type = "image/png"; // Optional: specify type
  document.head.appendChild(newFavicon);
};

// add your url here
changeFavicon("https://incentivizer.wpenginepowered.com/wp-content/uploads/2025/09/cropped-incentivizer-icon.png");
1 Like
2

@Mike7 - Nice :ok_hand:t2:

Thanks for sharing, very helpful :smiling_face_with_sunglasses: