Force browser to request dynamically loaded favicon

1
votes

I have an Angular application and another application from where you can customise the first one. This includes uploading a new favicon that needs to be displayed in the first application and refreshed when a new one is uploaded.

The way the favicon is loaded is:

<link rel="shortcut icon" data-ng-href="{{favicon}}"/>

The application is bootstrapped in the html tag and the variable 'favicon' is a variable in the root scope which contains a link to the url for the favicon.

How can I force the browser the request the favicon every time the page is refreshed?My understanding is that the favicon is cached and that is causing it not to be refreshed.

I have read that the most common solution is to add versions to the favicon as a query string, but I don't have a way of knowing what version I need to request as there could me multiple versions uploaded from the second application.

1
javascripthtmlangularjsfavicon
don't take "Version" too literally, a time stamp will just work to force a refresh. – Axel Amthor
I changed a favicon a few weeks back and it took my site three days to actually show up. I had caching off in my meta data. I think my server was what took a while to update.just my personal experience. – Peter S McIntyre
Why do you need to disable the cache? How often does the favicon change? Is it required to have the most up to date favicon every request? – Tim
@tim Yes, it is required to have the most up to dare favicon every request. In practical terms it won't change often, but the requirement is that every time you upload a new one you should be able to see it refreshed. – bubble
@AxelAmthor, your comment pointed me in the right direction so thannks to you too. – bubble

1 Answers

2
votes

In your controller:

$scope.version = new Date()*1; // get a timestamp

And in your HTML

<link rel="shortcut icon" data-ng-href="{{favicon}}?v={{version}}"/>

With this, your link to the favicon will be uniq everty time, and the browser will always request it.