I have a website (reactjs code).
Last year, my site's favicon is only one. And I setting favicon by <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> in head tag.

Then my user want to add favicon and title config from database.

In index.js file,  app will call api getFavicon, and then update favicon using bellow code.

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = faviconFromApi;


After we update favicon from database
All browser work fine. But only in safari private mode, favicon is not change. it still display the old favicon we added last year.

We try to remove cache and test again but it still not change. But if we use safari normal mode, it work fine (favicon will change exactly).

Then I try to another way. remove cache and restart our iphones.
And the results are, in private mode, ios 15.6 and ios 15.1, the favicon update successully. But only ios 15.5 it still not work.

Please help me to fix it. How to make favicon in safari private mode change like what is safari normal mode work.