Cómo cambiar el favicon de CLI angular


141

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

3
Posible duplicado de Cómo
fuerzo

Ejecutar la aplicación con un puerto diferente resuelve el problema. ejemplo:ng s --port 4201
Sajad

Estoy teniendo el mismo problema. En mi caso, localmente todo está bien, pero cuando lo implemento en el servidor obtengo 500 errores internos del servidor ...
Ziggler

Leí toda la respuesta que me ayudó un poco, pero sinceramente, eso no debería ser tan complicado para una necesidad tan básica: solo una ruta para copiar la imagen, luego posiblemente un archivo de configuración, luego un reinicio. la respuesta "actualizar" no está ayudando.
pdem

Un favicon es un archivo estático que está especialmente configurado en angular.json, solo deje el valor predeterminado y vea aquí cómo funciona: stackoverflow.com/questions/40424907/…
pdem

Respuestas:


159

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


2
Gracias Sukhveer Esto funciona perfectamente, solo se requiere reiniciar la aplicación después de agregar el ícono en el angular-cli.jsonarchivo.
Ajay Sivan

1
Esto debe ser aceptado respuesta! ¡Nada funcionó pero este truco sí! Gracias Sukhveer Singh!
Junia Montana

También tuve que cambiar el camino png<link rel="icon" type="image/png" href="./favicon.png" />
Dude Pascalou

1
Gracias por el truco angular 9
shanti

56

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.


1
gracias hombre trabajó instantáneamente - CTRL F5 por la victoria - trabajó con Angular 6 con favicon en el mismo directorio que index.html y esta línea en index.html ... <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
danday74

¡los atajos son increíbles!
Gerardo Bautista

36

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


1
Esa es la única respuesta que funcionó para mí. ¡Gracias por eso!
Ivan

2
Después de navegar al favicon, volví a cargar la página de inicio y presioné ctrl + f5 (chrome); esto funcionó. Salud.
blueprintchris

1
Esto es lo único que funcionó para mí. ¡increíble!
Yaniv Eliav

28

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

Trabajó para mí Gracias
Venky559

Gracias ...? Any = param ayuda para eliminar el icono anterior en caché
ArunDhwaj IIITH

Esto es lo único que funcionó para mí. No es el ctrl + f5, ni todas las demás respuestas, ¡esto es lo que está funcionando!
seguro

14

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.


Sí, nada más funcionó para mí aquí, pero pegarlo en la carpeta de activos funcionó perfectamente. Salud.
scohe001

10

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.


1
Esto también eliminará los íconos de las páginas marcadas existentes, hasta la próxima vez que visite la página. Sin embargo, esto hizo el truco para mí.
David B

9

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

De hecho: tuve que poner el mío en la carpeta de activos y cambiar la ruta en index.html y en el archivo angular.json.
G. Delvigne

5

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

salvavidas! thx
koo9

4

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.


En Chrome y Firefox, no fue un problema de almacenamiento en caché. Moví mi archivo ICO, y Chrome y Firefox se actualizaron inmediatamente.
Steve11235

Actualicé mi archivo favicon.ico y no se cargó. Hice esto (me mudé a activos y enlaces actualizados) y funcionó bien.
David

4

Presione Ctrl+ F5en la ventana del navegador


Hola Andrey, buena respuesta, pero quizás quieras explicar que esto actualiza el caché, de lo contrario es solo una respuesta "mágica".
Tom

1
Esta respuesta es exactamente la misma que la de Yuri (respondida el 26 de noviembre de 16 a las 19:12) menos la explicación muy útil.
robinCTS

4

PARA RECARGAR FAVICON PARA CUALQUIER PROYECTO WEB:

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


1
Después de 20 minutos de golpear mi cabeza contra la pared, esta es la única solución que funcionó. ¡¡gracias!!
wooldridgetm

2

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.


2

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.

1

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


1

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.


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

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


1

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

0

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.


0

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)


0

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


0
  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


0

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.


0

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


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

"assets": [

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

  ],

Esto funcionó para mí.


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

0

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


0

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

0

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.


-1

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

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

-1

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

-1

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.