Comprobador de favicons
Comprehensive Check
Check all favicon files of the website, including various formats and sizes
Compatibility Check
Verify favicon compatibility across different platforms and devices
Optimization Suggestions
Provide detailed optimization suggestions and best practice guidance
Esta herramienta gratuita comprueba si un sitio web tiene una configuración de favicons completa. Analiza los archivos de favicon clásicos, los Apple Touch Icons, el manifiesto de aplicación web y las meta etiquetas comunes, y marca todo lo que falta o está mal configurado.
Funciona con cualquier sitio web público: introduce un dominio o una URL y obtén un informe instantáneo de qué archivos de favicon existen y cuáles necesitas añadir.
- Favicon ausente – no se encontró favicon.ico ni favicon PNG
- Tamaño incorrecto – los archivos no coinciden con el tamaño esperado
- URLs rotas – archivos de favicon que devuelven 404 o no cargan
- Falta apple-touch-icon – no hay icono para la pantalla de inicio de iOS
- Faltan iconos PWA o el manifiesto de aplicación web
- Introduce la URL del sitio web que quieres analizar.
- Haz clic en Comprobar y espera unos segundos.
- Revisa cada sección: Favicon clásico, Touch Icons, Manifiesto web y Meta etiquetas.
- Corrige lo marcado como error y vuelve a comprobar.
El checker confirma que tus archivos y HTML son correctos, pero cada navegador cachea los favicons a su manera. Sigue esta lista por navegador para confirmar que el nuevo icono está realmente activo.
- Chrome y Edge: comparten la caché de iconos de Chromium. Abre chrome://favicon/https://your-site.com en la barra de direcciones para inspeccionar el icono en caché; si está obsoleto, una recarga forzada (Ctrl+Mayús+R) o una ventana de incógnito fuerza una nueva petición.
- Firefox: el que más agresivamente cachea — puede retener un favicon durante días. Evítalo abriendo la URL del favicon con una query anti-caché (?v=2) en una ventana privada, o borra en Ajustes → Privacidad → Contenido web en caché.
- Safari (macOS): muestra favicons en pestañas desde la versión 14 e ignora las query ?v=. Prueba en una nueva ventana privada, o borra mediante el menú Safari → Borrar historial tras revisar de nuevo la página.
- Pantalla de inicio iOS: apple-touch-icon.png solo se obtiene al «Añadir a pantalla de inicio». Elimina el acceso directo antiguo y vuelve a añadirlo — sustituir solo el archivo nunca actualiza un icono existente.
- Resultados de Google: los favicons de búsqueda provienen de la copia indexada, no de la caché del navegador. Tras los cambios, solicita la reindexación de tu portada en Google Search Console; la propagación suele tardar días.
Classic Formats
favicon.ico
Formato ICO tradicional, compatible con todos los navegadores
favicon.png
Formato PNG moderno, admite fondo transparente
favicon.svg
Formato vectorial, admite modo oscuro
Mobile Devices
Apple Touch Icon
Icono de pantalla de inicio para dispositivos iOS
Android Chrome
Icono PWA de Android
Web App Manifest
Archivo de configuración de PWA
Ejemplo de configuración completa
<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">¿Por qué se necesitan varios formatos de favicon?
Diferentes navegadores y dispositivos admiten formatos y tamaños distintos. Proporcionar varios formatos garantiza que los iconos se muestren correctamente en todas las plataformas.
¿Sigue siendo necesario el formato ICO?
Aunque los navegadores modernos admiten PNG, el ICO sigue siendo la opción más compatible, especialmente para navegadores antiguos.
¿Qué es un Web App Manifest?
El Web App Manifest es un archivo JSON que define la configuración de una PWA, incluidos iconos, nombre, color de tema, etc.
¿Cómo optimizar la velocidad de carga del favicon?
Usa tamaños de archivo adecuados, incluye varios tamaños en los archivos ICO y comprime los archivos PNG.
¿Qué significa que falte un favicon?
Si no se encuentra ningún archivo de favicon, los navegadores solicitan /favicon.ico por defecto y muestran un icono genérico o vacío en las pestañas. Añadir un favicon mejora el reconocimiento de la marca y hace que el sitio se vea profesional.
¿Por qué mi favicon se muestra con el tamaño incorrecto?
Los navegadores eligen el icono del tamaño más cercano disponible. Proporciona archivos de 16×16, 32×32 y 48×48 con los atributos de tamaño correctos para que cada navegador pueda elegir el adecuado.