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