not doesnt cli change cannot angular-cli

angular-cli - doesnt - png to ico



Cómo cambiar el favicon de CLI angular (29)

  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

¿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">

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)

Asegúrese de que cuando use la imagen del icono no se manipule la extensión, como si descarga una imagen png y luego cambia manualmente su extensión de png a icon . 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.

Como ha reemplazado físicamente el archivo favicon.ico , debe haber un problema de almacenamiento en caché en alguna parte. Hay un caché en su navegador. Oblígalo a enjuagarse 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é: ( Source )

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

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

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

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

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

Estaba luchando con esto también, 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 a C:/Users/your_username/AppData/Local/Google/Chrome/User Data/Default y elimine los archivos Favicons-journal, Favicons y 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.

Estuve jugando un rato con esto. 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

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 :

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

angular.json :

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

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á.

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 de esta manera <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Los siguientes pasos funcionaron para mí.

  1. Eliminar el archivo "favicon.ico" predeterminado 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. Cree y ejecute su aplicación, y realice una actualización completa Ctrl + F5 .

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.

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

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

PARA RECARGAR FAVICON PARA CUALQUIER PROYECTO WEB:

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

Para Angular 6, coloque favicon.png de tamaño 32x32 en la carpeta del activo y cambie la ruta en index.html . Entonces,

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

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

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.

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">

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.

Presione Ctrl + F5 en la ventana del navegador

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" ],

FINALMENTE..

  • 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

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.

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

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

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" />

Yo tuve el mismo problema.

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

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 mí.

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="#">

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

<link rel="icon" type="image/x-icon" href="assets/liana.jpg"> "assets": [ "assets/sorry.jpg", "assets/liana.jpg" ],

Esto funcionó para mí.