Si alguna vez has desplegado una app de Vite y te has encontrado con ese cuadrado gris genérico en la pestaña del navegador, sabes de lo que hablo. No es un bug, es un hueco de configuración. A diferencia de frameworks más antiguos donde podías editar manualmente el HTML, Vite se basa en una convención estricta de nombres de archivo que suele pillar desprevenidos a los que vienen de Create React App.

Cuando Mercadona actualizó su branding, no se limitó a cambiar una imagen. Se aseguraron de que cada resolución, desde el icono de 16x16 de la pestaña hasta el de 512x512 para la PWA, estuviera perfectamente optimizada. Si quieres que tu app de Vite tenga un aspecto tan profesional como el panel de control de Mercadona, tienes que dejar de hacer pruebas y seguir el estándar moderno.

Por qué Vite gestiona los iconos de forma diferente

Vite trata tu carpeta public como la raíz de los assets estáticos. Esto significa que los archivos colocados ahí se sirven tal cual, sin procesar. Sin embargo, la magia ocurre cuando nombras tus archivos correctamente. Vite detecta automáticamente nombres de archivo específicos como favicon.ico o favicon.svg e inyecta las etiquetas HTML necesarias durante el build.

Este enfoque elimina la necesidad de plugins complejos o etiquetas <link> manuales en tu index.html para el icono principal. Es un flujo de trabajo limpio y con opinión que ahorra tiempo, pero requiere precisión. Si escribes mal el nombre del archivo, el navegador no encontrará el icono y te quedarás con ese temido cuadrado gris por defecto.

Paso 1: Prepara tus archivos fuente

Antes de tocar el código, necesitas los assets adecuados. Un solo archivo PNG rara vez es suficiente para los estándares de 2026. Necesitas un SVG para la escalabilidad y un ICO multiresolución para navegadores antiguos. Si solo tienes un logo, usa Mzu favicondl para generar los tamaños necesarios al instante.

Asegúrate de que tu SVG esté optimizado. Elimina capas ocultas y metadatos innecesarios. Un SVG hinchado ralentizará tu pintado inicial, aunque sea solo un icono de 16x16 píxeles. Para el archivo ICO, incluye los tamaños 16x16, 32x32 y 48x48 en un solo contenedor.

Paso 2: Coloca los archivos en el directorio public

Navega hasta la raíz de tu proyecto. Verás una carpeta llamada public. Este es el único lugar donde viven los assets estáticos. Arrastra y suelta tus archivos favicon.svg y favicon.ico directamente en esta carpeta.

No pongas estos archivos en src/assets. Si los pones ahí, Vite hasheará los nombres de archivo durante el proceso de build (por ejemplo, favicon.a1b2c3.svg), lo que rompe el mecanismo de detección automática. La carpeta public es tu zona segura para archivos que deben permanecer con el nombre exacto que tienen.

Paso 3: Verifica la configuración

Ejecuta tu servidor de desarrollo con npm run dev. Abre tu navegador e inspecciona el código fuente de la página. Deberías ver una línea similar a esta:

<link rel='icon' type='image/svg+xml' href='/favicon.svg' />

Si ves esto, Vite ha detectado tu icono correctamente. Si no, comprueba la extensión de tu archivo. Vite distingue entre mayúsculas y minúsculas. Favicon.svg no funcionará; debe ser favicon.svg. Este es un error común que hace perder horas de depuración.

Cómo manejar el modo oscuro y los iconos de Apple Touch

Una configuración profesional va más allá del icono de pestaña por defecto. Los usuarios modernos esperan que tu sitio se adapte a sus preferencias del sistema. Si tu marca usa un fondo oscuro, un logo blanco podría desaparecer en modo oscuro. Necesitas una variante SVG específica para esto.

Implementando soporte para modo oscuro

Crea un segundo archivo SVG llamado favicon-dark.svg. En tu index.html (dentro de la carpeta public, no en src), añade una etiqueta link condicional. Esto le dice al navegador que intercambie el icono según la media query prefers-color-scheme.

<link rel='icon' type='image/svg+xml' href='/favicon.svg' media='(prefers-color-scheme: light)' /> <link rel='icon' type='image/svg+xml' href='/favicon-dark.svg' media='(prefers-color-scheme: dark)' />

Esta simple adición asegura que tu marca permanezca visible y pulida independientemente de la configuración del sistema operativo del usuario. Es un pequeño detalle que denota ingeniería de alta calidad.

Configurando el icono de Apple Touch

Los usuarios móviles en iOS necesitan un icono diferente. Cuando añaden tu sitio a la pantalla de inicio, el navegador espera un PNG de 180x180. Coloca un archivo llamado apple-touch-icon.png en tu carpeta public. Vite servirá este archivo automáticamente cuando el navegador lo solicite.

No olvides el archivo de manifiesto. Crea un manifest.json en la carpeta public y enlázalo en tu index.html. Este archivo le dice a Android e iOS cómo mostrar tu app como una PWA independiente. Para más detalles sobre la estructura del manifiesto, consulta nuestra guía sobre Web App Manifest Favicon.

Problemas comunes y soluciones

Incluso con la configuración correcta, las cosas pueden salir mal. El problema más frecuente es la caché. Los navegadores son agresivos al cachear los favicons. Si actualizas tu icono pero sigues viendo el antiguo, no estás viendo un bug; estás viendo una versión en caché.

Para forzar una actualización, puedes añadir una cadena de consulta a tu etiqueta link en index.html, como href='/favicon.svg?v=2'. Esto engaña al navegador para que obtenga el nuevo archivo. Alternativamente, limpia la caché de tu navegador o usa una ventana de incógnito para verificar el cambio.

Otro problema es el error 404 en la consola. Si la consola de tu navegador muestra un 404 para /favicon.ico, significa que el archivo falta en la carpeta public. Incluso si usas un SVG, algunos navegadores siguen solicitando el archivo ICO heredado. Proporciona siempre un archivo ICO de respaldo para silenciar estos errores.

Finalmente, recuerda que la salida del build de Vite va a la carpeta dist. Cuando despliegues, asegúrate de que tu servidor sirva los archivos del directorio public correctamente. Si usas un host estático como Vercel o Netlify, esto ocurre automáticamente. Si estás en un servidor personalizado, revisa tu configuración de enrutamiento.

Configurar un favicon para una app de Vite no tiene por qué ser complicado. Respetando las convenciones basadas en archivos y proporcionando los formatos correctos, te aseguras de que tu app tenga un aspecto profesional en todos los dispositivos. Es la diferencia entre un proyecto de hobby y una aplicación lista para producción.