Cómo cambiar el favicon de CLI angular

¿Cómo puedo cambiar el favicon predeterminado que establece la CLI angular?

He intentado muchas cosas, pero siempre muestra el logotipo Angular como el favicon, a pesar de que he eliminado ese icono (favicon.ico en la carpeta src). Todavía se muestra, y no sé de dónde está cargado.

He reemplazado ese ícono con otro ícono, pero aún muestra el logotipo Angular:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Haga una imagen png con el mismo nombre ( favicon.png) y cambie el nombre en estos archivos:

index.html:

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

angular-cli.json:

"assets": [
    "assets",
    "favicon.png" 
],

Y nunca volverá a ver el icono angular predeterminado.

El tamaño debe ser 32x32, si es más que esto, no se mostrará.

NOTA: Esto no funcionará con Angular 9

Para angular 9, debe poner el favicon dentro de los activos y luego dar una ruta como

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

Como ha reemplazado el favicon.icoarchivo físicamente, debe haber un problema de almacenamiento en caché en alguna parte. Hay un caché en su navegador. Oblígalo a enrojecerse presionando Ctrl+F5 .

Si aún se muestra el ícono predeterminado, pruebe con otro navegador con un caché limpio (es decir, aún no ha visitado la página con ese navegador).

Borrar accesos directos de caché: ( Fuente )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ R, o Ctrl+ F5, o Shift+ F5.

Safari de Mac : ⌘+ R; Firefox / Chrome: ⌘+ Shift+ R.

Navegar por el archivo finalmente me arregló esto. En mi caso: http: // localhost: 4200 / favicon.ico

Traté de actualizar, detener y comenzar de ng servenuevo, y "Vaciar caché y recargar duro", ninguno funcionó.

Para asegurarse de que el navegador descarga una nueva versión del favicon y no utiliza una versión en caché, puede agregar un parámetro ficticio a la URL del favicon:

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">

podemos cambiar el icono de favicon CLI angular. tenemos que poner el archivo de icono en la carpeta "activos" y dar esa ruta en index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Es trabajo para mi.

También estaba luchando con esto, pensando que estaba haciendo algo mal con Angular, pero mi problema terminó siendo el almacenamiento en caché del icono de Chrome. El estándar "Vaciar caché y recargar duro" o reiniciar el navegador no funcionaba para mí, pero esta publicación me señaló en la dirección correcta.

Esto funcionó específicamente para mí:

Si está en Windows y usa Chrome, (exit chrome from taskbar) vaya C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default y elimine los archivos Favicons-journal, Favicons luego reinicie Chrome (desde la barra de tareas kill all instances).

Hay muchas otras buenas sugerencias en esa publicación si esto no funciona para usted.

Para Angular 6, coloque el favicon.pngtamaño 32x32en la carpeta del activo y cambie la ruta index.html. Luego,

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

Haga una imagen de icono con la extensión .ico y cópiela y reemplácela con el archivo favicon predeterminado en la carpeta src.

index.html:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

Mueva favicon.ico a sus activos y luego a la carpeta img, y después de eso solo cambie su etiqueta de enlace de icono en el encabezado. Me ayuda cuando el favicon no se mostró en absoluto.

Presione Ctrl+ F5en la ventana del navegador

PARA RECARGAR FAVICON PARA CUALQUIER PROYECTO WEB:

Haga clic derecho en el favicon y haga clic en 'recargar'. Funciona todo el tiempo.

Para futuros lectores, si esto le sucede a usted, su navegador quiere usar el viejo favicon en caché.

Sigue estos pasos:

1. Mantenga presionada la tecla CTRL y haga clic en el botón "Actualizar" en su navegador.
2. Mantenga presionada la tecla Mayús y haga clic en el botón "Actualizar" en su navegador.

Fijo.

Siga los pasos a continuación para cambiar el ícono de la aplicación:

1. Agregue su archivo .ico en el proyecto.
2. Vaya a angular.json y en ese "proyectos" -> "arquitecto" -> "construir" -> "opciones" -> "activos" y aquí haga una entrada para su archivo de icono. Consulte la entrada existente de favicon.ico para saber cómo hacerlo.

3. Vaya a index.html y actualice la ruta del archivo de icono. Por ejemplo,

4. Reinicia el servidor.

5. Hard actualizar el navegador y ya está listo.

Estuve jugando con esto por un rato. Resulta que el favicon aparentemente es manejado por un módulo de nodo llamado @scematics (al menos en Angular5).

Puedes cambiar tu favicon en esta carpeta:

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

En esa carpeta debe haber un favicon.ico, ese es el que se carga. Estoy bastante seguro de que esto no se aplica a todos, pero funcionó para mí.

Espero que esto haya ayudado. ¡Feliz codificación! :RE

Para aquellos que necesitan un favicon agregado dinámicamente, esto es lo que hice con un inicializador de aplicación:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

Simplemente elimine el archivo fav.ico en src / y agregue esto. El favicon se agregará antes del inicio de la aplicación.

<link rel="icon" type="image/x-icon" href="#">

Agregue la fuente de su icono y reinicie la aplicación, cambiará.

Probé muchas de estas soluciones pero no tuve éxito. El que funcionó para mi aplicación angular 5 fue el siguiente:

index.html: comenta tu etiqueta de enlace

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> --> 

.angular-cli.json: deje el tipo de elemento como ".ico"

 "assets": [
      "assets",
      "favicon.ico"
    ],

POR ÚLTIMO..

• En la estructura de carpetas de su proyecto, tenga el favicon.ico dentro del src ej: (C: \ Dev \ EPS \ src). NO necesita tenerlo en su carpeta de activos ya que no está haciendo referencia a él.

• Asegúrese de que su ícono no esté roto (su ícono debe ser legible si se ve a través del explorador de ventanas, es decir, sin ícono de ventana rota)

• debe tener una dimensión de 32 x 32

Cuando utilice la imagen del icono, asegúrese de que no sea una extensión manipulada, como si descarga una pngimagen y luego cambia manualmente su extensión de pngaicon . En este caso, su imagen se corromperá. Y el navegador no entiende.

Cometí este error, pero después de usar la imagen del icono original, comenzó a funcionar.

1.Compruebe su etiqueta de enlace en el archivo index.html para que se vea así.

<link red="icon" type="image/x-icon" href="favicon.ico">

2.Verifique el nombre del archivo de favicon.ico en el directorio / src.

3.Rerun Angular con ng servir y actualizar la aplicación.

4. Si no se muestra (o algo parece que amortigua el antiguo archivo favicon.ico). intente actualizar la ruta de favicon nuevamente para cargar el archivo favicon.ico (p. ej., actualice sudominio.com/favicon.ico)

Yo tuve el mismo problema.

Si está utilizando una Mac, deberá vaciar la caché ( Option+ ⌘+ E) y volver a cargar la página además de reiniciar la aplicación (y, por supuesto, cambiar la ruta en index.html).

1. Elimina tu favicon.ico existente
2. Agregue un nuevo icono a la carpeta src con el nombre "favico.ico"
3. Borrar caché en su navegador.

El icono no se refleja solo por la memoria caché de su navegador. A veces intente reiniciar la aplicación

Los siguientes pasos funcionaron para mí.

1. Eliminar el archivo predeterminado "favicon.ico" con uno nuevo con un nombre diferente, es decir, "_favicon.ico" en mi caso.

   Nota :: No conserve el nombre predeterminado, ya que se almacena en caché en su navegador y es difícil de sobrescribir con un nuevo icono.

2. Actualice index.html con una nueva etiqueta de enlace, es decir

    <link rel="icon" type="image/x-icon" href="_favicon.ico" /> 
   

3. Actualice .angular-cli.json con un nuevo nombre de icono, es decir, "_favicon.ico".

4. Compila e inicia tu aplicación y realiza una actualización completa Ctrl+ F5.

tan simple y fácil como:

1. agregue su icono o png en el mismo directorio que favicon
2. edite .angular-cli.json, en los activos elimine favicon.ico ponga el suyo en su lugar
3. edite index.html, busque favicon y coloque el suyo
4. ejecutar ng servir de nuevo

eso esta terminado

<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

Esto funcionó para mí.

En mi caso, el problema era que tenía diferentes dimensiones en comparación con la normal. Tenía 48x48 pxmientras esperaba 32x32 pxy mi extensión era png, así que tuve que cambiarlo aico

Lo que realmente funciona para mí fue poner mi favicon en la carpeta de activos y aparecer automáticamente en el navegador.

1. cambie la ubicación a la carpeta de activos dentro de la carpeta src.
2. cambie index.html así <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Ok, aquí en 2020 el 9.1.12. No entiendo por qué exactamente este proceso es tan difícil. Seguí casi todas las publicaciones anteriores y ninguna de ellas funcionó para mí.

Lo que sí funcionó fue esto: eliminar completamente la referencia de favicon en index.html. Es totalmente contra intuitivo pero funciona. NO necesita ponerlo en la assetscarpeta. Intenté todo eso pero desafortunadamente ninguna de esas sugerencias funcionó.

index.html

<!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> DELETE THIS -->

angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

y cuando corro ng build --prod, el favicon está ahí. También se muestra en mi servidor en vivo.

Eliminar el caché de Favicon de Chromes y reiniciar el navegador en la Mac me funcionó.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

Tuve el mismo problema y lo resolví forzando la actualización mediante el método descrito aquí :

Para actualizar el favicon de su sitio, puede forzar a los navegadores a descargar una nueva versión utilizando la etiqueta de enlace y una cadena de consulta en su nombre de archivo. Esto es especialmente útil en entornos de producción para asegurarse de que sus usuarios obtengan la actualización.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

Solucioné el problema creando mi propio archivo .ico, creé una carpeta de activos y puse el archivo allí. Luego cambió el enlace href en Index.html