6

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

enter image description here

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>
ar099968
  • 6,963
  • 12
  • 64
  • 127
  • 5
    the question is quite interesting. – chandu komati Dec 12 '19 at 10:29
  • 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
  • @chandukomati it seem a Chrome bug... – ar099968 Dec 12 '19 at 10:34
  • yes.. @ar099968 – chandu komati Dec 12 '19 at 10:35
  • 1
    @chandukomati nope... also on Firefox doesn't works! – ar099968 Dec 12 '19 at 10:35
  • let me check.. @ar099968 – chandu komati Dec 12 '19 at 10:36
  • 2
    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
  • why it seems made up question? – Abhishek Pandey Dec 12 '19 at 10:42
  • @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
  • @AbhishekPandey what you mean for "seems made up question"? – ar099968 Dec 12 '19 at 10:50
  • @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
  • @Aaron right, now i have understood. Thanks. – ar099968 Dec 12 '19 at 11:32

0 Answers0