How to add icon to webPage/Frame

Targets Web
1

Hello All.

Is there a way to add an icon to a web page/frame? I would like an icon to appear in the browser tab alongside of the Frame/Page Title

Thanks,
Tim

2

if XOJO doesn’t add this, do this manually in the Head section:

<link rel="apple-touch-icon" href="icon.png" />

More info: https://en.wikipedia.org/wiki/Favicon

3

If an icon is added to App, it should show in the tabs. I verified that it exists in the DOM. Note that when running local, you must choose another port than 8080 or empty the browser cache for it to show.

4

I was hoping to use a different icon for each page. Not the app Icon which does show.

5

I see no way to achieve that. As it happens, even if through JavaScript you change the page icon as outlined in the page that Tomas linked to, it is too late : the tab icon is already loaded.

Edit : I just tried, but as I feared, at least in Chrome, changing the icon in the DOM does not change the tab icon.

6

Don’t know how to do it in Xojo, and it will only work in some browsers like Chrome and Firefox (probably not in IE or Edge)
Try something like this (changes every second):

<html>
<head>  
    <link id="icon" rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/mattahan/umicons/64/Number-1-icon.png" />    
</head>
<body>
    <script>	
        var last = 0;
        var icons = ['http://icons.iconarchive.com/icons/mattahan/umicons/64/Number-1-icon.png', 'http://icons.iconarchive.com/icons/mattahan/umicons/64/Number-2-icon.png', 'http://icons.iconarchive.com/icons/mattahan/umicons/64/Number-3-icon.png','http://icons.iconarchive.com/icons/mattahan/umicons/64/Number-4-icon.png','http://icons.iconarchive.com/icons/mattahan/umicons/64/Number-5-icon.png'];        
        setInterval(function () {                   
            document.getElementById('icon').href = icons[(++last % icons.length)];            
        }, 1000);
    </script>
</body>
</html>