¿El favicon de React no se muestra? Aquí está la solución
React se renderiza en un nodo del DOM y nunca toca el head, así que el favicon vive en un archivo HTML estático. Una pestaña en blanco significa que la etiqueta link de ese archivo es incorrecta, o que el icono se importó desde src y ya no está en una ruta fija.
El head es un archivo estático, no un componente
El navegador solicita el favicon mientras analiza el head, mucho antes de que React se haya montado. Por eso el enlace del icono tiene que estar en el esqueleto HTML: index.html en la raíz del proyecto con Vite, o public/index.html con Create React App.
Dos cosas lo rompen. En Create React App, un href que omite el marcador %PUBLIC_URL% funciona en local y luego da 404 fuera de la raíz del dominio. En cualquier proyecto React, importar el icono desde src se lo entrega al bundler, que lo renombra con un hash de contenido, así que ya nada responde en /favicon.ico.
Localiza el fallo
- 1
Abre /favicon.ico directamente
Un 404 significa que el archivo no se sirve en esa ruta: un problema de build o de ruta. Si carga, el archivo está bien y el problema es la etiqueta link o la caché.
- 2
Lee el index.html generado
Mira en la salida del build, no en tu código fuente. Confirma que el href del icono se resolvió a una ruta real y, en CRA, que %PUBLIC_URL% se sustituyó en lugar de quedar literal.
- 3
Deja de importar el icono desde src
Los archivos en public/ conservan su nombre y responden en rutas fijas; los imports desde src/ llevan hash. Un favicon tiene que estar en public/.
El favicon de React no se muestra: preguntas frecuentes
¿Por qué no se muestra mi favicon de React?
Casi siempre la etiqueta link en index.html apunta a un sitio donde el archivo no está, o el icono se importó desde src y recibió un nombre con hash. Abre /favicon.ico directamente para ver si el archivo siquiera se sirve en esa ruta.
¿Por qué mi favicon da 404 después de desplegar en un subdirectorio?
El href se resolvió contra la raíz del dominio en lugar de tu subdirectorio. En Vite ajusta base en vite.config.js; en Create React App define el campo homepage y usa %PUBLIC_URL% en la plantilla, y luego revisa el index.html generado.
¿Necesito importar el favicon en mi código React?
No. Los archivos en public/ se copian a la salida del build tal cual y no forman parte del grafo de módulos. Importar uno produce una segunda copia con hash y rompe la ruta fija /favicon.ico.