The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #208227

    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:
    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(, 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


    Nope, on my knowledge they are not favicons…

    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


    @Paulie_D Yes, they were favicons.You are right. i just read an article

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


    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:


    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:


    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.
      // done!
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design’ is closed to new topics and replies.