Angular-2: Altere o ícone favicon conforme a configuração
Estou renderizando uma página dinâmica, menu e outros itens no meu aplicativo. Eu também quero mudar o favicon conforme configurado pelo admin.
Digamos, por exemplo, se quando meucarregamento da página o favicon configurado éxyz.png
então ele vai mostrarxyz.png
como o favicon.
Como na imagem abaixo, o novo favicon deve substituir o existente próximo por "Test Application". No momento, ele mostra o favicon padrão, como visto abaixo.
index.html
:
<!DOCTYPE html>
<html>
<head>
<base href="/MyFirstAngular2/" >
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" id="appIcon" href="/favicon.ico" type="image/x-icon" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="css/Site.css" rel="stylesheet" />
<script src="scripts/jquery-2.2.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/main/shim.min.js"></script>
<script src="scripts/main/zone.js"></script>
<script src="scripts/main/reflect-metadata.js"></script>
<script src="scripts/main/system.src.js"></script>
<script src="scripts/system.config.js"></script>
<script>
document.SYSTEMJS_CONFIG.map.app = 'scripts/configs';
document.SYSTEMJS_CONFIG.packages.app = { main: 'application.ts', defaultExtension: 'ts' };
System.config(document.SYSTEMJS_CONFIG);
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<application></application>
</body>
</html>
Eu recebo um novo favicon em cada carregamento de componente, então você precisa alterar o ícone favicon de qualquer chamada de componente.