Si alguna vez has ejecutado ng new y has desplegado tu aplicación de inmediato, has cometido un pequeño pecado: dejar el icono 'A' de Angular por defecto. Nada grita más 'proyecto sin terminar' que ese triángulo rojo en la pestaña del navegador. En 2026, los usuarios esperan una experiencia pulida, y eso empieza con un favicon para Angular nítido y de alta resolución.

Angular gestiona los activos de forma diferente a un sitio HTML estático. Debido a que el CLI de Angular empaqueta tu aplicación usando Esbuild o Webpack, no puedes simplemente soltar un archivo en una carpeta y esperar que funcione. Tienes que decirle al framework exactamente qué hacer con tus activos de marca. Vamos a ver la forma profesional de configurar esto para que tu app parezca hecha por un equipo de cincuenta personas.

Paso 1: Prepara tus archivos

Antes de tocar el código, necesitas una imagen de alta calidad. Siempre recomiendo empezar con un SVG. ¿Por qué? Porque escala infinitamente y soporta el modo oscuro de forma nativa. Si sigues usando un solo archivo ICO de 16x16, estás viviendo en el pasado. En pantallas de alta densidad, ese icono se verá borroso.

Pasa tu logo por una herramienta como Mzu favicondl para generar los tamaños necesarios. Como mínimo, quieres un PNG de 32x32, uno de 192x192 para Android y un Apple Touch Icon de 180x180. Si quieres saber por qué importan estas medidas, mira nuestra guía de Favicon SVG. Guarda los archivos en src/assets/favicons/.

Paso 2: Configura el angular.json

Aquí es donde fallan muchos desarrolladores. Si no registras tus nuevos iconos en el archivo angular.json, el proceso de compilación los ignorará. Abre angular.json y busca el array de assets.

'assets': [
  'src/favicon.ico',
  'src/assets',
  {
    'glob': '**/*',
    'input': 'src/assets/favicons',
    'output': '/'
  }
]

Con esta configuración, le decimos a Angular que tome todo lo que hay en la carpeta favicons y lo ponga en la raíz del build final. Así, tu index.html puede referenciarlos como /favicon-32x32.png. Es la misma estrategia que usan gigantes como Stripe para sus activos.

Paso 3: Actualiza el index.html

Ahora abre src/index.html. Borra la línea del favicon.ico por defecto y sustitúyela por un stack moderno que cubra todos los dispositivos.

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='alternate icon' type='image/png' href='/favicon-32x32.png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

El rel='alternate icon' es un truco genial para navegadores antiguos que no entienden SVG. Si después de desplegar no ves los cambios, probablemente sea un problema de caché. Aprende a solucionarlo en nuestra guía sobre cómo limpiar la caché del favicon.

Errores comunes en Angular

Un error típico es olvidar el base href. Si tu app está en una subcarpeta, las rutas absolutas fallarán. Además, si usas PWA, asegúrate de que tu manifest.webmanifest apunte a los mismos archivos. Los detalles importan, y un favicon bien puesto es la guinda del pastel de tu desarrollo.