El mejor generador de favicons para React
Una app de React sin más (Vite o Create React App) no tiene convención de iconos integrada. Colocas los archivos en la carpeta public y escribes tú mismo las etiquetas link en index.html. El generador adecuado te entrega ambas cosas, así no queda nada a la adivinanza.
Lo que de verdad importa en React
React por sí mismo no renderiza nada en el head del documento por ti. El icono vive en la carpeta public y se declara en index.html, así que el generador tiene que producir tanto los archivos como las etiquetas exactas para pegar. Una herramienta que te entrega imágenes pero no marcado deja sin resolver la mitad que de verdad falla.
El fallo habitual es un único favicon.ico y nada más, que cubre la pestaña de escritorio pero deja iOS y Android con sus iconos de reserva. Un conjunto completo más las etiquetas correspondientes es lo que hace que el icono aparezca en todos los sitios donde debería.
Los criterios que importan en React
| Qué buscar | Por qué importa en React | Cómo lo hace el generador de aquí |
|---|---|---|
| Archivos más etiquetas | React no declara nada en el head por ti | Exporta los archivos de la carpeta public y las etiquetas para pegar en index.html |
| Conjunto de tamaños completo | Un solo ICO deja el móvil con los iconos de reserva | favicon.ico, todos los PNG, apple-touch y los tamaños Android |
| Manifest incluido | Las instalaciones PWA leen los iconos del manifest | Incluye manifest.json conectado a los tamaños exportados |
| Vite o CRA | Ambos sirven los recursos de public de la misma forma | La guía funciona igual para Vite y Create React App |
El generador frente a un único favicon.ico
Un conjunto completo más las etiquetas
Start hererecomendado
- Todos los tamaños, desde la pestaña de 16px hasta el icono de instalación de 512
- Las etiquetas link y de manifest exactas para pegar
- Icono apple-touch, así las pantallas de inicio de iOS quedan cubiertas
- manifest.json conectado para Android y las instalaciones PWA
Limitarse a colocar favicon.ico
- Cubre la pestaña de escritorio y nada más
- iOS recurre a una captura de pantalla en la pantalla de inicio
- Las instalaciones en Android muestran un icono genérico
- Sin manifest, así que el aviso de PWA se ve sin terminar
¿Dónde van los archivos de favicon en una app de React?
En la carpeta public, referenciados por etiquetas link en index.html. Ni Vite ni Create React App inyectan el marcado del icono por ti, así que el generador tiene que darte los archivos y las etiquetas juntos. Los archivos en public se sirven desde la raíz del sitio, así que una etiqueta como /favicon.ico se resuelve directamente.
The step-by-step for React
You've picked the tool. Here's the exact install for React.