How to enable page refreshing favicon in browser tab?

Question

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?

Why would you be interested in doing something like that? Please provide some context.... — guyaloni, Oct 06 '21 at 10:24
@guyaloni I'm using AJAX, waiting for data from server. After receive, I'm going to switch my favicon to default. — ResistorsSmoker, Oct 06 '21 at 10:28
https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh — guyaloni, Oct 06 '21 at 10:31
You can not specifically "enable" this. The browser shows it automatically, when you trigger an action that loads something new into the top browser window. But that is not what you are doing here, you are making a background request. So you could only replace your own favicon with a different favicon, but you would have to provide the second one yourself as well. (And using animated images for favicons is a rather sketchy thing, that will hardly work everywhere.) — CBroe, Oct 06 '21 at 11:07
I chose another way, but still I can't trigger the page reloading favicon. Probably it depends only on browser, as CBroe wrote, and I can't do anything. — ResistorsSmoker, Dec 25 '21 at 21:17

score 1 · Answer 1 · answered Oct 06 '21 at 10:30

1

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

answered Oct 06 '21 at 10:30

Adnan Irfan

31
2

This is the swap. I'm not looking for this. – ResistorsSmoker Oct 06 '21 at 10:53

score 0 · Answer 2 · answered Oct 06 '21 at 10:39

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

How to enable page refreshing favicon in browser tab?

2 Answers2