Verificador y analizador gratuito de favicons
Analiza las declaraciones de favicon en el head del HTML. Detecta tamaños faltantes y buenas prácticas. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registro.
Actualizado
Favicon Checker & Analyzer
Analyze favicon declarations in your HTML head. Find missing sizes and get best-practice recommendations.
Paste HTML Head Section
Copy the <head> section from your webpage source (Ctrl/Cmd+U to view page source), paste it below, and click Analyze.
Favicon Best Practices
A complete favicon setup typically includes:
/favicon.ico— 16×16 + 32×32 combined, for legacy browsersfavicon-16x16.png+favicon-32x32.png— modern browsersapple-touch-icon.pngat 180×180 — iOS home screenandroid-chrome-192x192.png+512x512.png— Android + PWAsite.webmanifest— PWA manifest with icon declarationsmeta name="theme-color"— browser UI color on mobile
Tools like RealFaviconGenerator.net can generate all sizes from a single source image.
Related Tools
Preguntas Frecuentes
¿Qué es el Favicon Checker & Analyzer?
El Favicon Checker & Analyzer es una herramienta online gratuita que analiza las declaraciones de favicon en el head del HTML y comprueba si faltan tamaños y se siguen las buenas prácticas. Funciona por completo en tu navegador, sin necesidad de instalar nada ni registrarse.
¿Qué tamaños de favicon debería tener?
Recomendados: 16x16, 32x32, 180x180 (Apple Touch Icon) y un manifiesto web con 192x192 y 512x512.
¿Cómo se usa?
Pega la sección <head> de tu HTML y la herramienta extraerá y analizará todas las declaraciones de favicon.
¿Es gratis?
Sí, totalmente gratis.
¿Están seguros mis datos con esta herramienta?
Por supuesto. El Favicon Checker & Analyzer procesa todo del lado del cliente, en tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece siempre privado en tu dispositivo.
¿Funciona el Favicon Checker & Analyzer en dispositivos móviles?
Sí, el Favicon Checker & Analyzer es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.
¿Necesito crear una cuenta para usar esta herramienta?
No se necesita ninguna cuenta ni registro. Solo abre el Favicon Checker & Analyzer en tu navegador y empieza a usarlo de inmediato. No hay barreras de registro ni restricciones de uso.
¿Qué navegadores son compatibles?
El Favicon Checker & Analyzer funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.
¿Por qué un favicon necesita tantos archivos distintos en lugar de uno solo?
Porque ningún archivo único satisface a todas las plataformas. Los navegadores de escritorio leen PNGs pequeños o un .ico para la pestaña y la barra de marcadores, iOS usa un apple-touch-icon separado de 180×180 cuando alguien guarda tu sitio en la pantalla de inicio, y Android y las PWA obtienen sus iconos de lanzador (192×192 y 512×512) de un manifiesto web en lugar de cualquier etiqueta link. Una meta theme-color colorea entonces la interfaz del navegador móvil. Cada superficie mira una declaración distinta, así que una configuración robusta combina un respaldo /favicon.ico clásico, PNGs modernos de 16×16 y 32×32, un Apple touch icon, un manifiesto y theme-color. Si falta uno, esa superficie recurre silenciosamente a una imagen en blanco o recortada. Pega tu sección head en el analizador para ver cuáles de estas seis declaraciones tienes realmente y cuáles faltan.
¿Cuál es la diferencia entre rel="icon" y rel="apple-touch-icon"?
Apuntan a contextos distintos. Un enlace con rel="icon" (o el antiguo rel="shortcut icon") provee el pequeño icono que se muestra en las pestañas, marcadores e historial del navegador de escritorio, y normalmente se declara en 16×16 y 32×32 más un respaldo .ico. Un enlace con rel="apple-touch-icon" lo lee Safari e iOS cuando un usuario añade tu página a su pantalla de inicio; debe ser un único PNG de 180×180 sin transparencia, ya que iOS añade sus propias esquinas redondeadas. Usar uno en lugar del otro deja un hueco: si omites el apple-touch-icon, los accesos directos de pantalla de inicio muestran una captura de pantalla recortada en vez de tu logo. El analizador enumera cada enlace de icono que encuentra con su rel, href, sizes y type, y señala por separado tanto los iconos de escritorio como el Apple touch icon para que puedas confirmar que cada uno está declarado correctamente.
¿Cómo encuentra el analizador las etiquetas de favicon si solo pego parte de mi HTML?
La herramienta busca en cualquier marcado que le des etiquetas relacionadas con iconos, así que funciona tanto con el código fuente completo de la página como solo con la sección head. Coincide con cada <link> cuyo rel contenga icon, apple-touch-icon, manifest, shortcut o mask-icon, y con cada <meta> de theme-color, msapplication-TileImage o msapplication-TileColor. Para cada uno extrae el rel o name, el href o content, el sizes y el type, y luego los lista en una tabla. No obtiene los archivos de imagen referenciados ni carga una URL en vivo, por eso lee sin problemas marcado de sitios de staging, páginas protegidas con contraseña o HTML local. Para el resultado más completo, pega todo tu <head>, ya que ahí es donde viven las declaraciones de favicon. Suelta tu marcado y el analizador reporta cada etiqueta de icono que detecta en segundos.
¿Se necesita un manifiesto web solo para que funcione un favicon?
No, un favicon básico funciona sin uno. Los navegadores mostrarán un icono de pestaña a partir de un simple enlace rel="icon" o de un /favicon.ico, y Safari usará un apple-touch-icon, ninguno de los cuales depende de un manifiesto. El manifiesto importa cuando quieres que Android Chrome y las aplicaciones web progresivas muestren un icono de lanzador adecuado, ya que esas plataformas leen sus iconos de 192×192 y 512×512 desde el site.webmanifest en lugar de etiquetas link. Sin él, un acceso directo en la pantalla de inicio de Android recurre a un icono genérico o basado en una letra. Así que un manifiesto es opcional para un favicon de pestaña pero se espera para una configuración completa y lista para instalación, por lo que el analizador marca un manifiesto ausente como un hueco y no como un error grave. Pasa tu sección head por la herramienta para ver si tu manifiesto y theme-color están presentes.
¿Por qué no se muestra mi favicon aunque la etiqueta link está en el head?
Una etiqueta correcta es solo la mitad de la historia. Las causas más comunes son una ruta href incorrecta, de modo que el navegador solicita un archivo que devuelve 404; un caché de navegador agresivo, donde el icono antiguo o uno en blanco persiste mucho tiempo después de actualizar el archivo; o que la propia imagen sea un archivo mal formado o en un formato que el navegador no puede renderizar. Declarar sizes que no coinciden con la imagen real, o apuntar rel="icon" a un archivo que ya no existe, produce el mismo resultado en blanco. Este analizador comprueba las declaraciones de tu marcado, no los archivos en tu servidor, así que confirma si las etiquetas y los tamaños están presentes y bien formados, y luego señala lo que falta. Pega tu head aquí primero para descartar problemas de etiquetas, luego verifica que cada href realmente cargue e intenta una recarga forzada para limpiar el caché.
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/favicon-checker" title="Free Favicon Checker & Analyzer — The Toolbox" width="100%" height="280" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/website-tools/favicon-checker?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Favicon Checker & Analyzer</a> by The Toolbox</p>Herramientas Relacionadas
Test de velocidad de sitios web gratis
Analiza el tiempo de carga de las páginas, las métricas de rendimiento y las oportunidades de optimización de tu sitio web. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registrarte.
Test de compatibilidad móvil gratis
Comprueba si tu sitio está optimizado para dispositivos móviles. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registrarte.
Extractor de Meta Etiquetas Gratis
Extrae y revisa todas las meta etiquetas de cualquier página web para análisis de SEO y redes sociales. Gratis, rápido y funciona totalmente en tu navegador sin necesidad de registro.
Herramienta de Capturas de Pantalla de Sitios Web Gratis
Captura capturas de pantalla de página completa o de la ventana de cualquier página web para revisión de diseño y pruebas. Gratis, rápido y funciona totalmente en tu navegador sin necesidad de registro.
Acerca del Verificador y Analizador de Favicon
El Verificador y Analizador de Favicon es una herramienta gratuita para auditar la configuración del favicon declarada en el <head> HTML de una página. Pega la sección head de cualquier página web y la herramienta extrae cada etiqueta <link> y <meta> relacionada con iconos, enumera exactamente lo que encontró y califica la configuración según los tamaños y formatos que esperan los navegadores modernos. Está pensada para desarrolladores front-end, especialistas en SEO y propietarios de sitios que quieren confirmar que su favicon se muestra correctamente en las pestañas del navegador, los marcadores, las pantallas de inicio móviles y los resultados de búsqueda, sin tener que adivinar qué etiquetas faltan.
Un favicon es el pequeño icono que un navegador muestra en la pestaña, la barra de marcadores y el historial. Hoy en día, un favicon "completo" ya no es un solo archivo: cada plataforma lee declaraciones distintas, así que una configuración robusta abarca un .ico clásico, tamaños PNG modernos, un icono Apple touch, un manifiesto web para Android y una sugerencia de theme-color. Esta herramienta hace visibles esos huecos de un vistazo.
Qué comprueba el analizador
Después de pegar tu marcado, la herramienta busca etiquetas relacionadas con iconos y reporta seis comprobaciones de buenas prácticas, marcando cada una como cumplida, con advertencia o ausente:
- favicon.ico de respaldo — un
rel="icon"oshortcut iconque apunta a un archivo.ico, el respaldo más seguro para navegadores antiguos. - Icono de 32×32 — el tamaño estándar de alta densidad para pestañas y marcadores en navegadores de escritorio.
- Icono de 16×16 — el tamaño clásico de pestaña pequeña, declarado con
sizes="16x16". - Apple Touch Icon (180×180) —
rel="apple-touch-icon", utilizado cuando alguien añade tu sitio a la pantalla de inicio de iOS. - Web App Manifest —
rel="manifest", que provee los iconos de Android y PWA (normalmente 192×192 y 512×512). - Meta theme-color —
<meta name="theme-color">, que colorea la interfaz del navegador en móvil.
También muestra declaraciones relacionadas que encuentra en el camino, como enlaces mask-icon y las etiquetas meta msapplication-TileImage y msapplication-TileColor utilizadas por los antiguos mosaicos de Windows.
Cómo usarlo
Abre tu página en un navegador y visualiza el código fuente con Ctrl+U (o Cmd+U en Mac), copia la sección <head>, pégala en el cuadro y haz clic en Analizar. La herramienta analiza el marcado y devuelve tres cosas: una puntuación de completitud que muestra cuántas comprobaciones se cumplieron, una lista de cada declaración de favicon detectada (tipo de etiqueta, rel, href, sizes y type), y recomendaciones específicas. Cada elemento faltante viene acompañado de la etiqueta exacta que debes añadir — por ejemplo, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — así puedes copiar la corrección directamente en tu plantilla.
Como el analizador lee el marcado que pegas en lugar de obtenerlo de una URL en vivo, funciona también en páginas de staging, sitios protegidos con contraseña y archivos HTML locales. Todo se ejecuta en tu navegador; nada de lo que pegas se sube, se almacena ni se envía a ningún servidor, y no requiere registro.
Por qué importa una configuración de favicon completa
Un favicon ausente o mal formado es una señal de calidad pequeña pero persistente. Los navegadores recurren a un icono de documento en blanco, lo que dificulta localizar tu pestaña entre muchas abiertas y da una impresión de sitio inacabado junto a competidores marcados como favoritos. En móvil, la falta de un Apple touch icon o de un manifiesto hace que un acceso directo en la pantalla de inicio muestre una captura de pantalla recortada en lugar de tu marca, y las aplicaciones web progresivas de Android pierden por completo su icono de lanzador.
Una configuración típica lista para producción incluye /favicon.ico (16×16 y 32×32 combinados para navegadores antiguos), archivos favicon-16x16.png y favicon-32x32.png separados para navegadores modernos, un apple-touch-icon.png de 180×180, PNGs de 192×192 y 512×512 referenciados desde un site.webmanifest, y una etiqueta meta theme-color. Pasa tu sección head por el analizador después de cualquier rediseño o migración de framework — estas etiquetas se pierden fácilmente durante una reconstrucción, y esta comprobación detecta los huecos antes de que lo hagan los usuarios.