¿El favicon de Vite no se muestra o da 404? Aquí está la solución
Vite copia public/ a la raíz de la salida y reescribe index.html en el momento del build. Un favicon que funciona en desarrollo y da 404 en producción casi siempre lleva el segmento public/ en su ruta, o se importó desde src y recibió un hash.
Dos pipelines de assets, y solo quieres uno
Todo lo importado desde src forma parte del grafo de módulos: Vite lo incrusta en línea o lo emite con un hash de contenido y reescribe la referencia. Eso es lo correcto para las imágenes de la interfaz y lo incorrecto para un favicon, que tiene que responder en una URL fija.
public/ es la vía de escape. Los archivos que hay ahí nunca se resuelven, ni reciben hash, ni se incrustan. Se copian a la raíz de la salida con sus nombres intactos. Así que public/favicon.ico se sirve en /favicon.ico, y el href debe ser exactamente eso.
Las etiquetas link correctas
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Rutas absolutas desde la raíz, sin segmento public/. Estas viven en index.html en la raíz del proyecto, no dentro de public/.
El favicon de Vite no se muestra: preguntas frecuentes
¿Por qué mi favicon de Vite solo da 404 en el build de producción?
Porque la ruta pasó por public/ o por un import, y ambos cambian entre desarrollo y build. Abre el index.html generado y el directorio de salida y confirma que el href y el archivo concuerdan.
¿Necesito importar el favicon en algún sitio?
No. Los archivos en public/ están deliberadamente fuera del grafo de módulos. Si importas uno, Vite emite una segunda copia con hash, dejándote dos archivos donde querías uno y nada en /favicon.ico.
El favicon da 404 cuando despliego bajo un subdirectorio.
Ajusta base en vite.config.ts. Vite reescribe las URL de los assets en index.html durante el build, así que abre el archivo generado después y confirma que los href del icono llevan el prefijo antes de publicar.