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

[Eva]

The situation is this:
A company has different products (in my case they are programms). The website of the company is built in joomla. I need to set up the logos of the products as home screen icons? The link below is the site i am talking about: http://logic.al/
Let suppose: I am a user who visited the site of Logical. Than i want to add on my mobile homescreen only a programm they have,for example: WebFLEX. But when i “add to the homescreen ” the url(http://logic.al/en/distribution/webflex), i notice it is not the icon of the programm itself but it is the company logo,something i dont want.
Any idea how to set up this kind of requirement of the user ?
Thank you in advance

[Eva]

Nope, on my knowledge they are not favicons…
http://www.maxoptika.al/

I did this for another site,but i was required to add only one homescreen icon,not different homescreen icons for same site but different categories

[Eva]

@Paulie_D Yes, they were favicons.You are right. i just read an article https://scotch.io/tutorials/all-favicons-for-all-devices-and-sizes.

Let me rewrite my issue:
Different favicons for different url-s of the same site. Sounds better, i guess

[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!

  
})();

[Author]

Posts