cli - change favicon angular 6

Favicon no funciona en aplicación angular

Question

Esto está debajo del código que es para un favicon personalizado

 <link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

en angular.cli

"assets": [
        "assets",
        "favicon-16x16.png"
      ],

• Está funcionando para esta URL (menú principal): http://localhost:4200/maintenance

• Pero no funciona para esta URL (Submenú): http://localhost:4200/maintenance/colors

EDITAR:

Además, no funciona con la URL de favicon completa href="../src/favicon-16x16.png"

Estructura de la carpeta:

He intentado poner todo tipo de URL de mi pregunta anterior: Diferente entre ./, ../, ../../, ~ / en la ruta del archivo (URL) en asp.net

Pero no me ayuda.

Answer 1

Usted está usando la URL relativa. Significa que la primera página traduce la URL de favicon a: http: // localhost: 4200 / favicon-16x16.png y luego a http: // localhost: 4200 / maintenance / favicon-16x16.png .

así que mejor uso

<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/x-icon" />

Answer 2

Intenta agregar esto a la carpeta de activos

"assets": [
        "assets",
        "./src/favicon-16x16.png"
      ],

Y luego el favicon como

<link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

Answer 3

Tu primera configuración está bien. Obtuve exactamente el mismo comportamiento que en Internet Explorer 11. Incluso después de eliminar el caché, etc. En Firefox, el icono no cambia en absoluto. No intenté eliminar el caché y el historial, ya que es mi navegador principal. En Chrome, funciona bien. Yeey Chrome.

Así que supongo que estás usando Internet Explorer e Internet Explorer almacena la memoria caché en Windows. Puede usar Windows "Limpieza del disco" (no estoy seguro de si lo traduje correc- tamente) para limpiar este caché. Después de eso el problema fue resuelto.

Enlace para Windows 10

TLDR funciona bien. Es solo un problema de almacenamiento en caché.

Answer 4

De acuerdo con lo que dices, está trabajando en "menú principal" y no en "submenú", parece que tu carpeta principal de src se llama "/ mantenimiento". Entonces deberías tratar de usarlo como tu raíz base.

tratar :

<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-16x16.png" type="image/png" />

Answer 5

Tuve un problema similar y tuve que usar una ruta absoluta para favicon. Puede intentar usar una ruta de acceso absoluta a su aplicación (o un servidor de contenido dedicado / CDN).

Sería útil mostrar también lo que hay debajo de la carpeta de la aplicación para que podamos ver cómo se están resolviendo las rutas / mantenimiento y / mantenimiento / colores (¿son rutas de carpeta? ¿Enrutamiento angular?). En cualquier caso, una ruta absoluta sería la solución más simple para que pueda pasar a cosas más productivas.

Answer 6

Considere el hecho de que los favicons siempre están muy almacenados en caché. Incluso la recarga de la ventana con la limpieza del caché puede no ser de ayuda. Intente agregar un get param a la ruta del favicon, por ejemplo:

<link rel="icon" sizes="16x16" href="some-path/favicon-16x16.png?v=2" type="image/x-icon" />

Answer 7

Por mucho que pueda ver desde su estructura de carpetas, su angular-cli.json está en la carpeta raíz, por lo que hacer referencia a favicon-16x16.png no funcionará como "favicon-16x16.png" en todos los casos, que podría ser el problema de que está trabajando en el sitio raíz, pero no funciona en subdirectorios; en cambio, pruébelo así:

"assets": [
        "assets",
        "/src/favicon-16x16.png"
      ],

Y en su href del enlace agregue / antes de favicon-16x16.png para que se vea así:

<link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />

El problema podría no estar aquí en absoluto, podría ser la forma en que escribiste parte del otro código, intenta mirar unos pasos atrás en el código donde se llaman a otras cosas y ver si hay algunos problemas lógicos allí, por ejemplo, alguna función o alguna parte del código que debe ejecutarse no se llama en absoluto. (y supongo que no tienes ningún problema o error de sintaxis, ya que el programa en sí funciona)

Answer 8

De la respuesta @KingpinEX, he agregado un favicon separado para URL normal y URL relativa

<link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png" 
type="image/png" />
<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-
16x16.png" type="image/png" />

Después de agregarlos, forcé la actualización del navegador. todo está funcionando mejor.