CODEWITHSUNDEEP
javascripthtmlangularjsfavicon
MartaGalve
MartaGalve

Reputation: 1226

Force browser to request dynamically loaded favicon

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.

Upvotes: 1

Views: 393

Answers (1)

Tmb
Tmb

Reputation: 470

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.

Upvotes: 3

Related Questions