JavaScript: Change the favicon at runtime doesn't works on popup

Question

I want change at runtime the favicon. My code works when the page is opened in a tab, but doesn't works when the page is opened in a popup

demo online

I have tested on latest Chrome, Firefox and Edge and doesn'works, but works on Internet Explorer 11.

this is the code used for change the favicon:

function changeFavicon(src) {
    // delete the current favicon from the DOM
    var oldLink = document.getElementById('appFavicon');
    if (oldLink) {
        document.head.removeChild(oldLink);
    }

    // add the new favicon
    var link = document.createElement('link');
    link.id = 'appFavicon';
    link.rel = 'shortcut icon';
    link.href = src;
    document.head.appendChild(link);
}

this is the full favicon.html made for the gif:

<!doctype html>
<html>
<head>
    <link rel="shortcut icon" id="appFavicon" href="favicon.ico">
</head>
<body>
    <script>
    function popUp(url,windowName) {
       newwindow=window.open(url,windowName,'height=200,width=350');
       if (window.focus) {newwindow.focus()}
       return false;
    }
    function changeFavicon(src) {
        var oldLink = document.getElementById('appFavicon');
        if (oldLink) {
         document.head.removeChild(oldLink);
        }

        var link = document.createElement('link');
        link.id = 'appFavicon';
        link.rel = 'shortcut icon';
        link.href = src;
        document.head.appendChild(link);
    }
    </script>
    <p><button onclick="changeFavicon('https://c5-excel-15.cdn.office.net/x/_layouts/resources/FavIcon_Excel.ico')">Excel</button></p>
    <p><button onclick="changeFavicon('https://c5-powerpoint-15.cdn.office.net/p/resources/1033/FavIcon_Ppt.ico')">Power Point</button></p>
    <p><button onclick="changeFavicon('https://c5-word-view-15.cdn.office.net/wv/resources/1033/FavIcon_Word.ico')">Word</button>
    <br /><br />
    <button onclick="popUp('favicon.html')">Open this page in a PopUp</button></p>
</body>
</html>

Does this answer your question? [How to make the favicon appear in a new window?](https://stackoverflow.com/questions/40177033/how-to-make-the-favicon-appear-in-a-new-window) — Abhishek Pandey, Dec 12 '19 at 10:30
@AbhishekPandey thanks, but no, i need to change at runtime.. — ar099968, Dec 12 '19 at 10:31
actually your code is working @ar099968 you can see. but not reflecting link icon, may be it's browser issue. — chandu komati, Dec 12 '19 at 10:33
A popup doesnt have a favicon. I'm not too sure how it appears on windows but the upper left corner has the chrome logo always staying there (on linux) which is also what you see in your example popup. The default favicon is the grey globe (what you see on the standard page). in the popup there is just the chrome logo and im pretty sure you change that as easy as the default favicon. Hope this clarifies your issue. — Aaron, Dec 12 '19 at 10:38
@Aaron i want change the favicon at runtime with javascript. For some reason the same code works on tab e doesn't works on popup and the all browser have the same behaviour, except Internet Explorer, on IE it works as expected. — ar099968, Dec 12 '19 at 10:46
@ar099968 as I told you Chrome (and also firefox) have their own "Favicon" which is simply their logo. I guess there is no way to change that. Since I'm on Linux I cant access a IE instance but I guess it just treats popups differently. In the popup there is only the Chrome Logo and NOT a grey globe (default favicon). — Aaron, Dec 12 '19 at 11:01

JavaScript: Change the favicon at runtime doesn't works on popup

0 Answers0