I have a front end that is written in Angular and a default favicon.ico is packed in the public folder. A simple index.html is showing this favicon.ico as follow:
<html>
<head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
</head>
</html>
This works well. Now there is a requirement to get a custom favicon.ico from the backend via an API call, this API simply returns a favicon.ico file with 200 or 404 if nothing is found in the backend.
The API works fine, but my problem is, I want to show the default favicon.ico (the one that is packed in the public folder of the front end) IF the API call fails or 404.
What I tried was to have a script in the front end to call this API and if the result is 200, then update the link element. This also worked, but the default favicon was shown momentarily and then got updated to the custom one, which I don't want.
What I hoped to work is like below:
<link rel="icon" href="/getCustomFavicon" onerror="href='%PUBLIC_URL%/favicon.ico'"/>
i.e. try to get from the API first for a custom favicon, if its not 200, show the default favicon
But the above didn't work, as in the default favicon was not shown when the API call returns 404.
How do you make the above work?