How to enable page refreshing favicon in browser tab?-CodePudding

Do you know any methods, statements, events to trigger the page reloading favicon? I got

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" type="image/png" href="myfavicon.ico" />
    ...
  </head>
  <body>
    ...
  </body>
</html>

Of course i can press F5 to reload the page, but it is undesirable, like as using

<form>
</form>

tags or

<input>
</input>

etc.

Favicon swap is undesirable too.

How to trigger loading favicon, without page reloading?

CodePudding user response：

You can do something like this

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://www.favicon.cc/favicon/867/133/favicon.ico';

CodePudding user response：

To trigger loading favicon, without page reloading you can force browsers to download a new version using the link tag and a query string on your filename. This is especially helpful in production environments to make sure your users get the update.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

You may also need to modify your code remove type="image/x-icon" and change the timestamp for the v?=2