Verificador de Favicon

Resumen (TL;DR)

La validación importa: Un favicon roto no es solo un icono faltante; provoca errores 404 en los registros del servidor y degrada la calidad percibida de la marca.
Análisis exhaustivo: Esta herramienta rastrea tu sitio como un navegador para verificar favicon.ico, iconos PNG, Apple Touch Icons y Web Manifests.
Resultados accionables: Obtén informes específicos sobre accesibilidad de archivos, desajustes de dimensiones y validez de formatos.

Implementar un favicon parece simple (subir un archivo, añadir una etiqueta), pero en la práctica es propenso a fallos silenciosos. Los ecosistemas de navegadores modernos (Escritorio, Android, iOS) tienen requisitos diferentes.

Caché del navegador: Los navegadores locales almacenan los favicons en caché agresivamente, ocultando a menudo problemas de despliegue que ven los nuevos visitantes (y los motores de búsqueda).
Estándares fragmentados: Necesitas más que solo favicon.ico. Los dispositivos Apple buscan apple-touch-icon. Los dispositivos Android y PWAs buscan un site.webmanifest.
Configuración del servidor: Las rutas de archivo correctas en HTML no significan nada si tu servidor devuelve 403 Forbidden o el tipo MIME incorrecto.

Este verificador actúa como un cliente neutral de terceros, evitando tu caché local para mostrarte el estado verdadero de tu despliegue de favicon.

Qué comprobaciones se realizan

Nuestro analizador realiza una auditoría de varios pasos de tu URL objetivo:

Análisis HTML: Escaneamos el <head> para encontrar todos los enlaces de iconos declarados (rel="icon", rel="apple-touch-icon", rel="manifest").
Validación del Manifiesto: Si se encuentra un Web Manifest, lo recuperamos y analizamos el array de icons para verificar que los tamaños declarados coincidan con las dimensiones reales del archivo.
Accesibilidad de activos: Intentamos descargar cada icono referenciado para verificar que devuelve un estado 200 OK.
Formato y dimensiones: Inspeccionamos los datos binarios para asegurar que el archivo es una imagen válida (ICO, PNG, SVG) y que sus dimensiones coinciden con lo declarado en el HTML/Manifest.
Descubrimiento implícito: Buscamos convenciones estándar como /favicon.ico y /apple-touch-icon.png incluso si no están explícitamente enlazados.

Fallos comunes de despliegue

1. El icono “Fantasma”

Tienes una etiqueta <link rel="icon" href="/icon.png">, pero el archivo en esa URL devuelve un 404. Solución: Verifica que la ruta del archivo sea correcta relativa a la raíz de tu dominio.

2. Desajuste de formato

Declaras type="image/png" pero sirves un archivo JPEG o ICO. Algunos navegadores estrictos pueden rechazar el icono. Solución: Asegúrate de que el encabezado Content-Type de tu servidor coincida con el formato real del archivo.

3. Mentira de dimensiones

Tu HTML dice sizes="32x32", pero la imagen real es 16x16 o 64x64. Esto obliga al navegador a redimensionar la imagen sobre la marcha, resultando a menudo en borrosidad. Solución: Usa el Generador de Favicon para producir tamaños exactos.

4. Falta Apple Touch Icon

Los dispositivos iOS no usan el favicon estándar. Sin un apple-touch-icon, los usuarios que añaden tu sitio a su pantalla de inicio obtienen una captura de pantalla genérica de la página. Solución: Incluye siempre un PNG de 180x180 específicamente para dispositivos Apple.

Mejores prácticas para una puntuación “Perfecta”

Para lograr una configuración de favicon robusta:

Fallback en raíz: Ten siempre un favicon.ico en la raíz (/favicon.ico) para herramientas heredadas y lectores RSS.
SVG para modernos: Usa un favicon SVG (type="image/svg+xml") para independencia de resolución en navegadores modernos.
Manifiesto: iconos distintos (src, sizes, type) en un manifest.json para Android y Chrome.
Cache Busting: Si actualizas tu icono, añade una cadena de consulta (ej. ?v=2) para forzar a los navegadores a volver a obtenerlo.

Preguntas frecuentes (FAQ)

¿Por qué el verificador dice “Falta” cuando yo puedo verlo?

Si puedes verlo, es probable que tu navegador haya almacenado en caché una versión antigua. El verificador ve lo que ve un nuevo visitante. Revisa los permisos de archivo y asegúrate de que la ruta del archivo sea absoluta (ej. /favicon.ico) en lugar de relativa si tienes estructuras de URL profundas.

¿Realmente necesito todos estos archivos?

Estrictamente hablando, favicon.ico es el mínimo indispensable. Sin embargo, para una presencia profesional en pantallas de inicio móviles, barras de tareas y pantallas de alta densidad, el conjunto completo (ICO + PNGs + Manifest) es una práctica estándar de la industria.

¿Puedo usar un CDN?

Sí. Solo asegúrate de que tus etiquetas <link> apunten a la URL absoluta en el CDN (ej. https://cdn.mysite.com/favicon.ico) y que los encabezados CORS estén configurados si es necesario.

Herramientas Favicon