Home › Forums › Design › How to set up an homescreen icon for different url of the same website? › Reply To: How to set up an homescreen icon for different url of the same website?
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!
})();