Por qué tu favicon se ve borroso (y la solución de escalado progresivo)

Subes un logo de 1024×1024 perfectamente nítido. El generador escupe un favicon de 16×16. Y el resultado en la pestaña del navegador es una mancha irreconocible. Si eso te suena, el problema normalmente no es tu logo — es cómo se redujo el icono. Aquí está la razón de gráficos por computadora por la que aparecen favicons borrosos, y la técnica de redimensionado que los corrige.

Por qué el redimensionado en un solo paso destruye los iconos pequeños

La mayoría de los generadores de favicon (y la mayoría del código de canvas copiado y pegado) hacen esto:

ctx.drawImage(img, 0, 0, 16, 16) // 1024px source → 16px target, one hop

Una sola llamada a drawImage que reduce una imagen 64× usa interpolación bilineal simple. Para cada uno de los 256 píxeles de salida, el navegador muestrea un vecindario minúsculo del origen — lo que significa que aproximadamente el 99,98 % de tus píxeles de entrada se descartan sin promediarse. El detalle fino como los trazos delgados, las formas de las letras y los huecos de 1px no se “mezclan hacia abajo”; se muestrean en puntos aleatorios, y por eso el texto se convierte en papilla y los logos desarrollan manchas turbias.

Este es un problema clásico de gráficos con una solución conocida: reduce en pasos, dividiendo a la mitad cada vez (1024 → 512 → 256 → 128 → 64 → 32 → 16). Cada paso de 2× es lo bastante pequeño para que el muestreo bilineal promedie un vecindario significativo, así que el detalle se fusiona progresivamente en lugar de saltarse. Es la misma idea que los mipmaps en el renderizado 3D y imageSmoothingQuality: "high" en canvas — pero encadenar explícitamente los pasos de halving da resultados consistentes entre navegadores.

La solución: halving progresivo en canvas

function drawDownscaled(ctx, img, targetW, targetH) {
  let source = img
  let w = img.naturalWidth
  let h = img.naturalHeight

  // Halve repeatedly while both dimensions stay above the target
  while (Math.floor(w / 2) >= targetW && Math.floor(h / 2) >= targetH) {
    const step = document.createElement('canvas')
    step.width = Math.floor(w / 2)
    step.height = Math.floor(h / 2)
    const stepCtx = step.getContext('2d')
    stepCtx.imageSmoothingEnabled = true
    stepCtx.imageSmoothingQuality = 'high'
    stepCtx.drawImage(source, 0, 0, w, h, 0, 0, step.width, step.height)
    source = step
    w = step.width
    h = step.height
  }

  // Final hop is now at most ~2x, which bilinear handles well
  ctx.imageSmoothingQuality = 'high'
  ctx.drawImage(source, 0, 0, w, h, 0, 0, targetW, targetH)
}

El bucle garantiza que la última reducción nunca sea superior a ~2× por eje — el rango donde la interpolación realmente funciona. Con un logo detallado, la diferencia es del cielo a la tierra: los trazos permanecen conectados, los contadores (los huecos de las letras) sobreviven, y los bordes conservan el contraste en lugar de disolverse en gris.

Ni siquiera un redimensionado perfecto puede salvar un mal origen

Dos errores en el origen causan la mayor parte de la borrosidad restante:

• Partir de un raster ya pequeño. Un origen de 64×64 escalado a 512 y vuelta no gana nada — empieza siempre desde la versión más grande de tu logo, o mejor aún, un original vectorial.
• Diseñar para 512 y esperar que se lea a 16. Los grandes iconos de pestaña están diseñados para 16px: elimina el detalle fino, engrosa los trazos al menos a 1/16 del lienzo y usa uno o dos colores. Si tu logo tiene un wordmark, usa solo el símbolo o la primera letra a tamaños de favicon.

Y si quieres saltarte por completo el redimensionado raster, un favicon SVG es independiente de la resolución — el navegador renderiza el vector exactamente a 16px, sin interpolación alguna.

Cómo verificar que tu favicon es realmente nítido

1. Descarga el favicon-16x16.png generado y ábrelo en un visor de imágenes con 400 % de zoom. Quieres bordes definidos, no papilla gris.
2. Compáralo lado a lado con tu logo de origen entrecerrando los ojos a distancia de brazo — la silueta debería seguir coincidiendo.
3. Compruébalo en una pestaña real del navegador, tanto en temas claros como oscuros, y contra otras pestañas para ver si es distinguible.

Nosotros lo corregimos en nuestro generador

Cuando auditamos nuestro propio pipeline contra este modo de fallo exacto, reemplazamos el redimensionado en un solo paso por el halving progresivo (más imageSmoothingQuality: "high") en todos los tamaños de salida. Por eso los iconos generados en Favicon.one aguantan a 16px donde otras herramientas emborronan. Si estás comparando generadores, esta es la prueba: sube un logo detallado con trazos finos y texto pequeño, y mira primero la salida de 16×16.

Más sobre el pipeline: cómo convertir un PNG en favicon correctamente, y todas las dimensiones que necesitas en la guía de tamaños de favicon.