Has hecho push de tu código a Vercel, el build pasó sin errores y tu sitio ya está en vivo. Abres la pestaña del navegador y, en lugar de ver tu logo nítido, te encuentras con un globo terráqueo gris genérico o un cuadrado blanco en blanco. A los mejores nos pasa, incluso después de años escribiendo código. El problema no es tu diseño; es cómo Vercel sirve los assets estáticos frente a cómo tu navegador los guarda en caché.

Arreglar un favicon que no aparece en Vercel requiere más que soltar un archivo en la raíz. La red de edge de Vercel es agresiva, y si no manejas la ruta del archivo y el manifest correctamente, tu icono podría permanecer invisible para siempre. Vamos a solucionarlo sin perder otra hora intentando limpiar la caché manualmente.

¿Por qué desaparece tu favicon en Vercel?

Vercel trata los archivos estáticos de forma muy diferente a un servidor tradicional. Al hacer deploy, la plataforma optimiza tus assets para la velocidad. Si tu HTML referencia una ruta que no existe exactamente como está escrita, o si el navegador tiene una entrada de caché obsoleta, el icono desaparece. Hemos visto esto en equipos que usan Next.js y en proyectos de HTML estático puro.

Pensemos en Mercado Libre o Mercado Pago. Su icono es un logo simple, pero aseguran que cargue instantáneamente en cada dispositivo. No dependen de rutas implícitas. Enlazan explícitamente a sus assets con versionado o rutas estrictas. Si simplemente lanzas un favicon.ico en la raíz sin un manifest o un enlace en el HTML, Vercel podría servirlo, pero el navegador podría no solicitarlo correctamente.

La trampa de la carpeta estática

Muchos desarrolladores asumen que la carpeta public en frameworks como Next.js o Vite se mapea directamente a la raíz. Lo hace, pero la convención de nombres importa. Vercel busca /favicon.ico por defecto. Si tu archivo se llama icon.png o favicon.svg sin una referencia en el HTML, el navegador no lo encontrará.

Debes decirle explícitamente al navegador dónde buscar. Confiar en la solicitud implícita de /favicon.ico es una apuesta. Si cambias tu logo, el navegador mantendrá el antiguo porque la URL no ha cambiado. Por eso siempre recomendamos usar la etiqueta <link> con una ruta específica.

Conflictos en el manifest.json

Si estás construyendo una Progressive Web App (PWA), el archivo manifest.json es el culpable. Este archivo le dice a los dispositivos móviles qué icono usar cuando un usuario añade tu sitio a su pantalla de inicio. Si las rutas dentro de manifest.json son relativas o incorrectas, Vercel no servirá el icono en Android o iOS.

Revisa tu archivo manifest.json. Asegúrate de que el array icons apunte a rutas absolutas que comiencen con una barra diagonal. Una barra faltante aquí rompe el enlace en dispositivos móviles, incluso si la pestaña de escritorio se ve bien. Este es un error común al pasar del desarrollo local a producción.

Paso a paso: Desplegando el icono perfecto

Deja de adivinar. Sigue este flujo de trabajo exacto para asegurar que tu favicon para Vercel funcione en todos los navegadores y dispositivos. Cubriremos la estructura de archivos, el código HTML y la configuración del manifest.

  1. Prepara tus assets: Genera un conjunto de múltiples tamaños. Necesitas al menos un PNG de 16x16, 32x32 y 512x512. Si tienes un SVG, inclúyelo también. Usa Mzu favicondl para convertir tu logo a los formatos requeridos al instante.
  2. Organiza tu directorio: Coloca tus archivos en la carpeta public (o static dependiendo de tu framework). Crea una subcarpeta icons para mantener todo ordenado. Tu estructura debería verse así: public/icons/icon-192.png.
  3. Actualiza el manifest.json: Abre tu archivo manifest.json. Añade las rutas de los iconos con referencias absolutas. No uses ./icons. Usa /icons/icon-192.png.
  4. Inyecta el enlace HTML: Añade las etiquetas <link> a tu index.html o a tu componente de layout raíz. Esto asegura que el navegador solicite el archivo inmediatamente.
  5. Despliega y verifica: Haz push a Vercel. Abre el sitio en una ventana de Incógnito para omitir la caché local. Revisa la consola del navegador en busca de errores 404.

El código que necesitas

Aquí tienes el snippet HTML exacto que debes colocar en el <head> de tu layout principal. Esto cubre SVG, PNG y el requisito del Apple Touch Icon. Fíjate en las rutas absolutas.

<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Fíjate cómo especificamos el type y los sizes. Esto ayuda al navegador a elegir el archivo correcto sin adivinar. Si omites el type, algunos navegadores podrían usar el formato incorrecto por defecto, lo que lleva a un icono roto.

Manejando el modo oscuro

En 2026, ignorar el modo oscuro es un error. Los navegadores ahora soportan media queries para favicons. Si tu logo es blanco, desaparecerá en una pestaña blanca en modo oscuro. Necesitas un SVG separado con una media query prefers-color-scheme.

Añade esto a tu sección head para manejar tanto temas claros como oscuros automáticamente. Esta pequeña adición hace que tu marca se vea pulida y profesional, tal como lo hacen Stripe o Apple.

<link rel="icon" media="(prefers-color-scheme: light)" href="/icons/light.svg">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/icons/dark.svg">

Errores comunes y soluciones

Incluso con el código correcto, las cosas pueden salir mal. La caché de Vercel es el sospechoso habitual. Si actualizaste tu logo y sigue sin aparecer, la red de edge está sirviendo la versión antigua.

Estrategias de Cache Busting

Vercel hace caché de los assets estáticos de forma agresiva. Para forzar una actualización, debes cambiar el nombre del archivo o añadir un query string. No solo sobrescribas el archivo. Cámbiale el nombre para incluir un hash de versión, como favicon-v2.svg, y actualiza tu enlace HTML.

Alternativamente, añade un query string a la URL. Esto engaña al navegador haciéndole pensar que es un recurso nuevo. Cambia /icons/favicon.svg a /icons/favicon.svg?v=2026. Esta es la forma más rápida de forzar una actualización sin renombrar archivos.

Revisa tu consola

Abre las herramientas de desarrollador de tu navegador y ve a la pestaña Network. Filtra por favicon. Si ves un error 404, tu ruta es incorrecta. Si ves un 200 OK pero el icono sigue faltando, verifica el MIME type. Vercel podría estar sirviéndolo como text/plain en lugar de image/svg+xml.

Si el MIME type es incorrecto, es posible que necesites añadir un archivo de configuración vercel.json a la raíz de tu proyecto. Este archivo le dice a Vercel exactamente cómo servir tipos de archivos específicos. Añade una regla para asegurar que los SVGs se sirvan con la cabecera correcta.

{
  "headers": [
    {
      "source": "/icons/(.*)",
      "headers": [
        {
          "key": "Content-Type",
          "value": "image/svg+xml"
        }
      ]
    }
  ]
}

Esto asegura que, incluso si la configuración por defecto de Vercel falla, tus SVGs se sirvan correctamente. Es una pequeña red de seguridad que ahorra horas de depuración.

Pensamientos finales sobre el despliegue

Lograr que el favicon para Vercel funcione correctamente se trata de precisión, no de magia. Necesitas la estructura de archivos correcta, enlaces HTML explícitos y un plan para la caché. No permitas que un icono faltante haga que tu arduo trabajo parezca incompleto.

Antes de hacer push de tu próxima actualización, realiza una auditoría rápida. Revisa tu manifest.json, verifica tus rutas y prueba en una ventana de incógnito. Si necesitas generar el conjunto perfecto de iconos a partir de tu logo, usa Mzu favicondl para hacer el trabajo pesado. Tus usuarios notarán la diferencia, incluso si no lo dicen en voz alta.