Tengo una interfaz que está escrita en Angular y un favicon.ico predeterminado está empaquetado en la carpeta pública. Un index.html simple muestra este favicon.ico de la siguiente manera:
<html> <head> <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/> </head> </html>Esto funciona bien. Ahora existe un requisito para obtener un favicon.ico personalizado desde el backend a través de una llamada API, esta API simplemente devuelve un archivo favicon.ico con 200 o 404 si no se encuentra nada en el backend.
La API funciona bien, pero mi problema es que quiero mostrar el favicon.ico predeterminado (el que está empaquetado en la carpeta pública del front-end) SI la llamada API falla o 404.
Lo que intenté fue tener un script en el front-end para llamar a esta API y, si el resultado es 200, actualizar el elemento de link . Esto también funcionó, pero el favicon predeterminado se mostró momentáneamente y luego se actualizó al personalizado, que no quiero.
Lo que esperaba trabajar es como a continuación:
<link rel="icon" href="/getCustomFavicon" onerror="href='%PUBLIC_URL%/favicon.ico'"/>es decir, intente obtener primero de la API un favicon personalizado, si no es 200, muestre el favicon predeterminado
Pero lo anterior no funcionó, ya que en el favicon predeterminado no se mostraba cuando la llamada API devuelve 404.
¿Cómo haces que funcione lo anterior?