Favicon para React

Tanto en Vite como en la aplicación Create React (CRA), los archivos estáticos ubicados en el directorio /public se sirven directamente desde la URL raíz sin ningún procesamiento de paquete. Esto significa que se puede acceder a /public/favicon.ico en https://yourdomain.com/favicon.ico, que es exactamente la ruta que los navegadores prueban primero para un favicon. No se necesita ningún cargador de paquetes web, complemento Vite ni configuración de compilación para la configuración básica de .ico.

Cuando crea un nuevo proyecto Vite React con `npm create vite@latest`, el andamio ya coloca un favicon.svg en /public y hace referencia a él en index.html. Este es un buen punto de partida, pero el SVG predeterminado es un ícono genérico de Vite. Reemplácelo con su propio SVG y agregue un respaldo .ico de varios tamaños para los navegadores que no admiten favicons SVG.

Crear andamios de aplicaciones React incluyen un favicon.ico en /public de forma predeterminada. Para reemplazarlo, simplemente sobrescriba el archivo con su propio .ico de varios tamaños. CRA también incluye manifest.json en /public: actualice las entradas de la matriz `icons` para que apunten a sus propios archivos PNG (192×192 y 512×512). El index.html en /public ya tiene la etiqueta de enlace de manifiesto insertada por CRA.

El .ico de varios tamaños sigue siendo el archivo más importante. Los navegadores que no admiten favicons SVG (versiones Safari anteriores, algunas herramientas de incrustación y creación de accesos directos Windows) recurren automáticamente a /favicon.ico. Un único archivo .ico agrupa fotogramas de 16×16, 32×32, 48×48 y 64×64 para que el navegador elija la resolución correcta sin etiquetas de enlace adicionales.

Para pantallas de alto DPI (Retina), agregue una etiqueta de enlace PNG explícita además del .ico. `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` le dice al navegador que use PNG en pantallas retina donde un ícono 2x se muestra con mayor nitidez que el marco .ico de la misma resolución. Coloque tanto el .ico como el PNG en /public.

Los favicons SVG ofrecen la mejor solución preparada para el futuro para aplicaciones React. Un único archivo SVG se reproduce nítidamente en cualquier tamaño de pestaña y puede adaptar sus colores a la combinación de colores del usuario. Agregue `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` en index.html. Los navegadores que admiten favicons SVG lo prefieren al .ico; navegadores que no saltan simplemente a la siguiente etiqueta de enlace.

Los favicons SVG en modo oscuro son potentes en las aplicaciones React porque el público objetivo suele utilizar herramientas de desarrollo y escritorios en modo oscuro. Incrusta un bloque `<style>` dentro de tu SVG con `@media (prefers-color-scheme: dark) { :root { fill: white; } }` (ajustado a la estructura de tu ícono). Este único archivo sirve tanto para temas claros como oscuros sin JavaScript ni etiquetas adicionales.

Se requiere el apple-touch-icon si algún usuario móvil guardará su aplicación React en su pantalla de inicio. Coloque apple-touch-icon.png (180×180) en /public y agregue `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` a index.html. Sin esto, iOS muestra una captura de pantalla de baja resolución de la aplicación en lugar del ícono de su marca en la pantalla de inicio.

Para aplicaciones React implementadas como PWA, su /public/manifest.json (o site.webmanifest) debe incluir entradas de íconos en 192×192 y 512×512. Estos tamaños activan el mensaje de instalación de la pantalla de inicio Android y el cuadro de diálogo de instalación Chrome PWA. El favicon generator genera PNG y una plantilla de manifiesto precargada que puede colocar directamente en /public.

El enrutamiento es importante para los favicons en implementaciones SPA React. La ruta /favicon.ico debe ser servida directamente por su host, no interceptada por el enrutador React. Las páginas de Vercel, Netlify y GitHub ofrecen contenido /public en la raíz antes de pasar al SPA. Si aloja en un servidor personalizado, confirme que su middleware de archivos estáticos se ejecute antes de la ruta general que sirve index.html.

Durante el desarrollo con `npm run dev`, Vite recarga en caliente la mayoría de los cambios automáticamente, pero los cambios de favicon a veces requieren una actualización manual del navegador. Los navegadores almacenan en caché /favicon.ico por origen incluso entre recargas del servidor de desarrollo. Para forzar una actualización durante el desarrollo, realice una actualización forzada (Ctrl+Shift+R) o agregue una cadena de consulta como `/favicon.svg?v=2` en su etiqueta de enlace temporalmente.

En configuraciones de renderizado del lado del servidor (React con un servidor Express personalizado, por ejemplo), debe confirmar que el middleware express.static() sirve /public antes que el controlador SSR React. Si el controlador SSR detecta todas las solicitudes primero, /favicon.ico será procesado por React y devolverá HTML en lugar del archivo binario ICO, rompiendo el favicon por completo.

Las configuraciones de Monorepo con múltiples aplicaciones React necesitan una gestión cuidadosa de los favicon. La carpeta /public de cada aplicación tiene su propio favicon. Si comparte íconos entre aplicaciones, considere mantener un único directorio de íconos de fuente verdadera en la raíz de monorepo y copiar archivos en cada /public durante el paso de compilación. Herramientas como `cp` en el script de compilación o un complemento de sincronización de activos dedicado los mantienen sincronizados.

Después de la implementación, use favicon tester para verificar que todas las variantes de favicon sean accesibles públicamente. Ingrese su URL de producción y verifique que favicon.ico, favicon.svg, apple-touch-icon.png y su manifiesto PNG se resuelvan correctamente. Esto descarta el servicio de archivos estáticos mal configurados o rutas que funcionan en desarrollo pero se interrumpen en producción.