Has subido lo que parece un PNG 1024×1024 bien definido, pero la favicon sigue saliendo borrosa en la pestaña del navegador. A todos nos ha pasado. El culpable casi siempre es un desajuste entre el archivo que subiste y el que el navegador elige para renderizar — no un defecto en tu arte original.

La solución rápida de 2 minutos

La mayoría de las favicons borrosas se resuelven con un solo flujo de trabajo. Aplícalo antes de buscar causas más profundas.

  1. Abre Mzu favicondl y sube tu imagen maestra (un SVG o, al menos, un PNG de 512×512).
  2. Genera el paquete completo: un ICO multi-tamaño de 16×16, 32×32 y 48×48, un Apple Touch Icon de 180×180, y PNGs de 192×192 y 512×512 para tu web manifest.
  3. Reemplaza cada archivo de favicon en la raíz de tu sitio y en el directorio /icons. No dejes archivos viejos por ahí.
  4. Recarga el navegador a fondo (Cmd-Shift-R en macOS, Ctrl-Shift-R en Windows).
  5. Verifica con DevTools → Network → filtrando favicon y confirma que realmente se sirva el archivo nuevo.

Añade este stack mínimo al head de tu HTML:

<link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png'>

Si la pestaña sigue viéndose difusa después de esto, la causa está entre las siete de abajo.

Por qué tu favicon se ve borrosa: 7 causas raíz

1. Tu navegador está escalando un archivo de 16×16 en una pantalla retina

El escenario más común: envías un favicon.ico que contiene solo una imagen de 16×16. En una pantalla 1× se ve bien. En una pantalla retina (2× o 3×), el sistema operativo toma ese archivo de 16×16 y lo escala con filtrado bilineal. De ahí viene lo borroso. Incrusta 16, 32 y 48 en un único ICO multi-tamaño y el sistema operativo elegirá la coincidencia más nítida — consulta la guía de ICO multi-tamaño.

2. Enviaste un único PNG enorme

Un PNG de 512×512 va genial para el manifest de la pantalla de inicio, pero es la herramienta equivocada para la pestaña. Si solo declaras ese PNG en tu <link rel="icon">, el navegador lo reduce a 16 o 32 píxeles lógicos. El downsampling bilineal de contenido fotográfico siempre se ve suave. Necesitas un PNG dedicado de 32×32 (o más grande, alineado al píxel) para anclar el renderizado de la pestaña.

3. Tu SVG no tiene viewBox

Un SVG sin el atributo viewBox se rasteriza al tamaño que el navegador elija — normalmente 16×16 — y luego se amplía para llenar el espacio de la pestaña. Los trazados Bézier crujientes se convierten en contornos embarrados. Declara siempre viewBox="0 0 32 32" (o similar) y diseña dentro de esa cuadrícula. La guía de favicon SVG recorre el patrón completo.

4. Incrustaste arte raster dentro de un SVG

Los diseñadores pegan un JPEG o PNG en Illustrator y guardan como SVG. Los navegadores lo renderizan sin problemas, pero a 16×16 el raster se muestrea, no se escala vectorialmente. La promesa escalable del SVG desaparece. Convierte los rellenos raster en trazados vectoriales reales, o sáltate el SVG por completo y envía un ICO multi-tamaño en su lugar.

5. Tu ICO contiene solo una resolución

ICO es un formato contenedor, no una sola imagen. Si renombraste un PNG de 16×16 a .ico, eso es precisamente lo que tienes — un archivo de únicamente 16×16. Los sistemas operativos y los navegadores eligen el tamaño incrustado más grande que quepa en el espacio. Con solo 16×16 disponible, cada render de mayor DPI termina siendo un escalado suave.

6. Tu logo tiene demasiado detalle para 16×16

Trazos finos, estrellas de cinco puntas, degradados, serifs delicados — todo esto se vuelve invisible o embarrado al tamaño de pestaña. El icono no está borroso en sentido técnico; simplemente carga más información de la que la cuadrícula de píxeles puede expresar. Simplifícalo a una marca única y contundente, con trazos gruesos y alto contraste.

7. Tu navegador está mostrando una versión antigua en caché

La caché de favicons de Chrome es notoriamente pegajosa. Incluso después de subir un archivo nuevo, Chrome puede seguir sirviendo el viejo entre recargas de pestañas, sobre todo en macOS. Safari cachea todavía con más fuerza. La solución es una recarga forzada y, en casos tercos, limpiar manualmente la caché de favicons.

Cómo prevenir un favicon borroso

La conclusión final

Un favicon borroso rara vez es un misterio. Casi siempre se trata de un desajuste de tamaño o formato que puedes corregir en dos minutos. Genera el paquete correcto con Mzu favicondl, reemplaza cada archivo, haz una recarga forzada y limpia la caché si es necesario. Tendrás una pestaña nítida en menos de cinco minutos — y tu sitio se verá más confiable al instante.

Revisa los requisitos documentados

El estándar HTML define rel='icon' como la relación de enlace para un icono que representa la página actual.