Abre Google, busca tu marca y mira de cerca el icono junto al título de tu página. Si se ve borroso, pixelado o estirado, probablemente estés sirviendo un favicon de baja resolución que Google está ampliando. Este es exactamente el problema que resuelve el patrón favicon PNG 96x96, y es la misma lógica de downsampling 2x que Google usa internamente para elegir el candidato más nítido.
Qué es realmente un favicon PNG 96x96
Un favicon PNG 96x96 es una imagen raster cuadrada, de 96 píxeles de ancho por 96 píxeles de alto, servida con el tipo MIME image/png. La dimensión de 96 píxeles no es arbitraria: es exactamente 2x el tamaño CSS de 48 píxeles que Google Search utiliza para renderizar el icono junto al título de tu página en los resultados de escritorio.
Cuando un navegador o motor de búsqueda necesita dibujar un icono de 48x48 y tu PNG fuente es 96x96, el downsampling produce bordes nítidos y un antialiasing limpio. Cuando tu fuente es de 16x16 y se amplía a 48x48, obtienes blur. El tamaño 96x96 está en un punto óptimo: lo suficientemente pequeño para mantener el archivo muy por debajo de 10 KB, y lo suficientemente grande para alimentar cualquier objetivo de renderizado común sin perder calidad.
Por qué este tamaño importa para Google Search
Según la documentación oficial de favicons de Google, un favicon es elegible (no está garantizado) para aparecer en los resultados de búsqueda si Google puede rastrearlo, es cuadrado y mide al menos 8x8 píxeles. Google recomienda ir por encima de 48x48.
Un PNG de 96x96 cae dentro de ese rango recomendado y es exactamente el doble del tamaño de visualización, lo que le da al renderer de Google un downsample limpio. El crawler de Google también elige la imagen cuadrada válida más grande que encuentre entre tus declaraciones <link rel='icon'> y tu favicon.ico en la raíz — un PNG 96x96 suele ganar esa selección, y una vez elegido, es lo que ven los usuarios en las SERPs. Para ver cómo encaja el 96x96 entre otros tamaños comunes, revisa nuestra guía completa de tamaños de favicon.
Cómo el atributo sizes indica a los navegadores qué usar
La especificación HTML da a los navegadores una pista sobre qué icono cargar mediante el atributo sizes en la etiqueta <link rel='icon'>. Como se define en el estándar HTML de WHATWG, cuando un user agent necesita un icono a un tamaño específico — por ejemplo, 48x48 para un resultado de Google o 32x32 para un pin en la barra de tareas de Windows — elige el icono declarado cuyo valor de sizes coincida o supere el objetivo.
Aquí está el patrón canónico para declarar un favicon PNG 96x96:
<link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'>Fíjate en el formato exacto: '96x96', en minúsculas, con la x como separador. Los navegadores ignoran '96', '96 X 96' o cualquier variante con espacios.
Implementación práctica: el stack completo
Enviar solo un PNG 96x96 no basta — los navegadores modernos esperan un conjunto por capas de iconos. Un bloque típico de <head> se ve así:
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicons/favicon-32x32.png'>
<link rel='apple-touch-icon' sizes='180x180' href='/favicons/apple-touch-icon.png'>
<link rel='shortcut icon' href='/favicon.ico'>El orden importa: coloca primero los iconos más grandes y de mayor prioridad. Los navegadores se detienen en la primera coincidencia de sizes que necesiten. El favicon.ico en la raíz cubre los navegadores antiguos y scrapers estilo curl que sondean el archivo directamente.
Buenas prácticas para el PNG 96x96
- Diseña a 96x96, no amplíes. Exportar un PNG 96x96 nuevo desde tu SVG fuente produce una cuadrícula de píxeles limpia. Ampliar una exportación de 32x32 hornea el blur que intentabas corregir.
- Mantén la URL permanente. Una vez que Google indexa tu icono, cambiar la URL fuerza un recrawl completo — algo que, según la documentación de Google, puede tardar días o semanas.
- Mantente por debajo de 10 KB. Un PNG 96x96 con una paleta de color limitada suele quedar entre 2 y 6 KB. Pásalo por un optimizador de PNG como Oxipng antes de desplegarlo.
- Cuadrado es obligatorio. El crawler de Google ignora las imágenes no cuadradas. Un archivo 96x95 no es válido para los resultados de búsqueda.
- Previsualiza a 48x48 antes de publicar. Usa una herramienta como Mzu favicondl para renderizar tu PNG 96x96 al tamaño real de visualización — si se ve sucio a 48x48, se verá sucio en Google.
Cuándo 96x96 no es la respuesta correcta
Si estás construyendo una PWA o necesitas un icono de pantalla de inicio en Android, el site.webmanifest pide PNGs de 192x192 y 512x512 — esos son los tamaños que la plataforma realmente usa. Para ese escenario, sigue nuestra guía de configuración de iconos del web app manifest. Para pestañas del navegador, barras de direcciones y resultados de Google, en cambio, 96x96 acompañado de un SVG es la configuración más nítida y realista.
Recomendación
Sirve un PNG 96x96 real — no un archivo más pequeño ampliado — declarado con sizes='96x96' en su propia etiqueta <link>. Combínalo con un SVG principal, un fallback PNG de 32x32 y un favicon.ico en la raíz. Ese stack satisface la recomendación de Google de 'mayor que 48x48', se ve nítido en los resultados de búsqueda y degrada con elegancia en navegadores antiguos.