Has subido tu nuevo favicon SVG a producción. Chrome de escritorio se veía perfecto. Luego un usuario comparte en Slack una captura desde Safari iOS y tu pestaña muestra un cuadrado blanco vacío. Esa brecha entre "se ve bien en mi máquina" y "funciona en todas partes" es exactamente lo que un favicon compatibility test está diseñado para cerrar.
Un favicon compatibility test es más que una revisión visual. Es una auditoría estructurada que verifica tu stack de iconos en cada entorno donde los navegadores, sistemas operativos y motores de búsqueda realmente solicitan favicons. La diferencia entre un favicon tester genérico y un verdadero compatibility test es la amplitud: formatos, tamaños, contextos y modos de renderizado.
Qué verifica realmente un Favicon Compatibility Test
La mayoría de los desarrolladores piensa que "compatibilidad" significa "¿aparece o no?". La compatibilidad real cubre al menos cinco dimensiones, y omitir una deja un fallo silencioso en producción:
- Compatibilidad de formato: SVG, PNG, ICO y GIF heredado se comportan de manera diferente en cada navegador.
- Compatibilidad de resolución: 16x16, 32x32, 48x48, 96x96, 180x180, 192x192, 512x512, cada uno apunta a un contexto específico.
- Compatibilidad de contexto: pestaña del navegador, barra de direcciones, barra de marcadores, Pinned Tab, pantalla de inicio, resultados de búsqueda de Google.
- Compatibilidad de tema: modo claro, modo oscuro y pestañas tintadas en Safari.
- Compatibilidad de rastreo: si Googlebot puede realmente obtener tus archivos de iconos desde una URL estable.
Cada dimensión tiene un modo de fallo distinto. Los archivos ICO se rompen en Safari si superan los 256KB. Los favicons SVG renderizan colores planos en Chrome pero solo respetan prefers-color-scheme cuando están escritos correctamente. La especificación WHATWG define rel='icon' con indicaciones explícitas de tamaño, y los navegadores usan esas indicaciones para elegir el archivo correcto (WHATWG HTML Living Standard).
Ejecutar un Compatibility Test con Mzu favicondl
Mzu favicondl trata el compatibility test como un flujo de trabajo por capas en lugar de una sola captura de pantalla. Pegas una URL y la herramienta extrae cada archivo de icono que el sitio expone: etiquetas HTML <link>, el /favicon.ico raíz, site.webmanifest y referencias de Apple Touch. Luego puedes inspeccionar cada archivo en los contextos en que los navegadores realmente los usan.
El flujo de prueba tiene tres etapas:
- Inventario: recopilar cada archivo de icono que sirve tu sitio, incluidos los ocultos en el manifest.
- Verificación de renderizado: previsualizar cada archivo en los tamaños que importan (16, 32, 48, 96, 180).
- Conversión de formato: generar los formatos faltantes (ICO desde SVG, PNG desde ICO) para llenar los huecos en tu stack.
Este enfoque por etapas importa porque la mayoría de los fallos de compatibilidad no son errores de renderizado, son archivos faltantes. Un sitio puede declarar rel='icon' type='image/svg+xml' pero servir un 404, dejando a Safari sin ningún icono. El paso de inventario de Mzu favicondl saca a la luz esos huecos de inmediato.
Stack HTML de referencia
Este es el stack mínimo de etiquetas link HTML que pasa la matriz de compatibilidad de abajo. Colócalo en tu <head>:
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='icon' href='/icon-96.png' sizes='96x96' type='image/png'>
<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>
<link rel='mask-icon' href='/safari-pinned.svg' color='#1a1a1a'>
<link rel='manifest' href='/site.webmanifest'>La matriz de compatibilidad contra la que deberías probar
Un favicon compatibility test enfocado no necesita cubrir todos los dispositivos jamás lanzados. Necesita cubrir las superficies que los navegadores modernos realmente usan. Esta es la matriz que recomendamos ejecutar antes de cualquier despliegue:
| Contexto | Archivo mínimo | Fallo común |
|---|---|---|
| Pestaña del navegador (Chrome, Firefox, Edge) | SVG o PNG de 32x32 | Falta el atributo sizes en el link |
| Pestaña del navegador (Safari) | SVG o PNG de 32x32 | El archivo ICO supera los 256KB |
| Barra de direcciones | PNG de 16x16 o entrada ICO | No se proporciona un ICO multi-tamaño |
| Pinned Tab (Safari) | SVG monocromo | Usar SVG a todo color en su lugar |
| Agregar a pantalla de inicio (iOS) | PNG de 180x180 | Fondo transparente (iOS añade blanco) |
| Agregar a pantalla de inicio (Android) | 192x192 + 512x512 maskable | Falta la zona segura maskable |
| Resultado de búsqueda de Google | Rastreable, cuadrado, ≥48x48 | La CDN bloquea a Googlebot |
Si tu stack tiene un hueco en alguna fila, ahí es donde fallará tu compatibility test. La solución suele ser una sola conversión de archivo, y ese paso lo maneja directamente Mzu favicondl.
Consejos pro para un resultado de compatibilidad limpio
Tres patrones rompen sistemáticamente los compatibility tests, y todos son evitables.
No sirvas el mismo SVG dos veces con tamaños diferentes. El atributo sizes en <link rel='icon'> es una indicación, no un interruptor. Los navegadores lo ignoran para archivos SVG porque SVG es independiente de la resolución. Añadir sizes='any' es la forma correcta de declarar un icono escalable según la especificación WHATWG.
Prueba el modo oscuro antes de desplegar, no después. Un logo negro sobre un SVG transparente se ve invisible en la franja de pestañas oscuras de Chrome. Mzu favicondl te permite previsualizar tu SVG sobre fondos claros y oscuros en paralelo. Si el contraste falla, añade una media query prefers-color-scheme dentro del propio SVG.
Incluye siempre un ICO multi-tamaño. Incluso hoy, el archivo /favicon.ico raíz es solicitado por navegadores, rastreadores y lectores RSS antiguos. Un ICO multi-tamaño con entradas de 16, 32 y 48 píxeles cubre todos los contextos heredados en un solo archivo.
Para una lista de verificación más detallada sobre qué archivos necesita realmente tu stack, consulta nuestro checklist de auditoría de favicons 2026. Y si estás a punto de desplegar un nuevo icono y quieres confirmar visualmente cada contexto del navegador, el favicon tester para todos los navegadores recorre esa parte del flujo de trabajo.
Para cerrar
Un favicon compatibility test no se trata de si tu icono se renderiza en tu portátil. Se trata de si cada navegador, sistema operativo, motor de búsqueda y modo de renderizado puede obtener, analizar y mostrar el archivo correcto. Tratarlo como una auditoría de cinco dimensiones (formato, resolución, contexto, tema y rastreo) convierte una suposición en una lista de verificación. Mzu favicondl te da el inventario y el pipeline de conversión; tu trabajo es recorrer la matriz fila por fila antes de cada despliegue.