Reply To: How to set up an homescreen icon for different url of the same website?

[Jerba]

You can specify the favicon path in the html file’s header using a link element.

<link rel="icon" href="path/to/my/icon.png"/>

If you’re serving the same html file but with different content i.e. via injecting partials then you’d probably have to use a little bit of javascript that fires on page load.

You can grab the elements in the html head by using:

document.head

and then using javascript to manipulate them accordingly to redefine the href of the link element to the desired path.

—

Quick demonstration:

We can grab the current url to use as a condition, we can do this by executing the following:

window.location.href

Once, we’ve decided what we want our condition, we need to append a link element to the html head, we’ll do this using the following snippet of javascript:

(function() {
  
  // create our link element
  var icon = document.createElement('link');

  // set the rel attribute to "icon"
  icon.rel = "icon";

  // give it a path (href attribute) to the desired favicon
  icon.href = "path/img.png";
  
  // once we're created our link element, we'll append it to the head.
  document.head.appendChild(icon);
  
  // done!

  
})();