Forums

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
    Posts
  • #208227
    Eva
    Participant

    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

    #208230
    Eva
    Participant

    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

    #208232
    Eva
    Participant

    @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

    #208244
    Jerba
    Participant

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