Favicon para React
React no gestiona el <head> por ti: el favicon se declara en index.html. Coloca tu favicon.ico en /public y enlázalo; las configuraciones modernas también incluyen una variante SVG y otra PNG.
Tanto Vite como CRA sirven /public en la raíz, así que /favicon.ico es la ruta de detección por defecto. No hace falta configurar el bundler.
Para pantallas de alta densidad y la solicitud de instalación PWA, añade un apple-touch-icon de 180×180 y un PNG de 512×512 en /public y enlázalos en index.html.
Cómo funciona
- 1
Genera un .ico multiresolución
Usa nuestro generador de favicons a partir de una fuente de 512×512.
- 2
Colócalo en /public
Pon favicon.ico, favicon.svg y apple-touch-icon.png en esa carpeta.
- 3
Enlázalo en index.html
Añade <link rel="icon" href="/favicon.ico"> y <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Pruébalo ahora
Crea un favicon listo para React
Generador de FaviconPreguntas frecuentes
¿Dónde se coloca el favicon en una app Vite + React?+
/public/favicon.ico (y /public/favicon.svg si quieres una variante vectorial).
¿Cómo añado un favicon con modo oscuro?+
Usa un único SVG con un bloque <style>@media (prefers-color-scheme: dark) {...}</style>.
¿Por qué no carga mi favicon en desarrollo?+
Haz una recarga forzada (Ctrl+F5). Los navegadores almacenan /favicon.ico en caché por origen, incluso entre recargas.
Herramientas relacionadas
Generador de Favicon
Genera un pack completo de favicons (ICO + PNGs) para cada dispositivo y navegador.
Convertidor de PNG a ICO
Convertidor online gratuito de PNG a ICO para iconos de Windows, apps y favicons de sitios web.
Convertidor de SVG a PNG
Rasteriza gráficos vectoriales SVG en PNG a cualquier resolución.