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
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>