Favicon Checker

Un favicon es el pequeño icono que un navegador muestra junto al título de tu página en pestañas, marcadores, listas de historial y accesos directos a la pantalla de inicio. El nombre es la abreviatura de "icono favorito", acuñado por Microsoft en 1999 cuando IE 5 introdujo /favicon.ico en la raíz del sitio. Hoy el favicon son seis archivos, no uno. Los navegadores de escritorio usan un PNG o SVG de 32x32. iOS usa un PNG de 180x180 a través de apple-touch-icon. Android obtiene PNGs de 192x192 y 512x512 de manifest.json. Las pestañas fijadas de Safari usan un SVG monocromático a través de mask-icon. El /favicon.ico heredado es el fallback cuando nada más se declara. Una configuración completa proporciona a cada dispositivo el tamaño y formato correcto, mantiene tu marca nítida en cada escala y evita el marcador de posición del globo genérico que renderizan las plataformas móviles cuando los iconos faltan o están dimensionados incorrectamente.

Un verificador de favicon obtiene el HTML de cualquier URL, analiza cada etiqueta link de la familia favicon e informa qué iconos se declaran, sus tamaños, formatos y si las URLs se resuelven. Recorre el head buscando <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, <link rel="mask-icon"> y <link rel="manifest">, luego verifica /favicon.ico en la raíz del dominio como fallback. Agrupa los resultados por objetivo de dispositivo para que veas qué renderiza Chrome de escritorio, Safari de iOS, Chrome de Android y pestañas fijadas de Safari. Ejecuta esta prueba de favicon antes de cada implementación para detectar variantes faltantes, URLs rotas y tamaños incorrectos en menos de tres segundos. La salida también marca si el propio manifest.json devuelve 200 y si el array de iconos dentro de él apunta a archivos reales, que es donde se esconden la mayoría de errores específicos de Android.

El conjunto moderno es 16x16, 32x32, 180x180, 192x192 y 512x512. Los PNGs de 16x16 y 32x32 manejan pestañas del navegador de escritorio y la barra de direcciones. Los navegadores eligen el tamaño más cercano al tamaño renderizado, así que enviar ambos previene el ampliado. El PNG de 180x180 es el apple-touch-icon usado por iOS para mosaicos de pantalla de inicio. Los tamaños más pequeños se amplifican y se ven borrosos en pantallas Retina. Los PNGs de 192x192 y 512x512 se encuentran en manifest.json para pantallas de inicio de Android y pantallas de inicio de PWA. Las guías antiguas recomiendan diez o más tamaños (57x57, 72x72, 114x114, 144x144). Los navegadores modernos ignoran la mayoría de esos. Cinco archivos cubren todos los dispositivos del mundo real, y el validador de favicon marca cualquier tamaño que no coincida con la especificación para que puedas descartar el bloat heredado.

Usa los tres para cobertura completa. ICO es el formato heredado, requerido para /favicon.ico en la raíz porque algunos navegadores más antiguos y rastreadores solo verifican allí. Un archivo ICO de multi-resolución de 16x16 más 32x32 es el fallback más seguro. PNG es el formato moderno de escritorio y móvil. Úsalo para <link rel="icon" sizes="32x32">, apple-touch-icon y los iconos del manifest. PNG maneja la transparencia limpiamente y se renderiza nítido en el tamaño declarado. SVG es el futuro. Úsalo para <link rel="icon" type="image/svg+xml"> y el mask-icon de Safari. SVG se escala a cualquier DPI sin borrarse, pesa 1-3 KB y soporta variantes en modo oscuro a través de media queries. Alrededor del 92% de navegadores en uso hoy soportan favicons SVG, con el 8% restante recurriendo silenciosamente a tu PNG declarado.

Cuando los usuarios de iOS tocan "Añadir a pantalla de inicio" desde Safari, el SO obtiene el apple-touch-icon para renderizar el mosaico de la pantalla de inicio. Si no declaras uno, iOS toma una captura de pantalla de la página y la usa, que se ve borrosa y sin marca. El tamaño esperado es PNG de 180x180 con fondo sólido, declarado como <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Alrededor del 25% del tráfico móvil global proviene de iOS, y un apple-touch-icon faltante significa que cada uno de esos usuarios que guardan tu sitio ve un marcador de posición en lugar de tu logo. La porción del verificador de apple-touch-icon de esta herramienta marca si el archivo se declara, el tamaño coincide con 180x180, la URL devuelve 200 y el fondo es sólido en lugar de transparente.

manifest.json es el Manifest de aplicación web, un pequeño archivo JSON que le dice a Android (y a Chrome de escritorio) cómo se comporta tu sitio cuando se instala como una Aplicación web progresiva. Declara el nombre de la app, color del tema, color de fondo, modo de visualización y lo más importante el array de iconos. Android obtiene PNGs de 192x192 y 512x512 del manifest para renderizar el mosaico de pantalla de inicio, pantalla de inicio y entrada del cajón de aplicaciones. Sin un manifest declarado mediante <link rel="manifest" href="/manifest.json">, Android recurre a una captura de pantalla de tu página o un icono de globo genérico. Alrededor del 70% del tráfico móvil mundial se ejecuta en Android, así que un manifest faltante es una impresión de marca faltante cada vez que un usuario instala tu sitio o lo fija a la pantalla de inicio.

mask-icon es una declaración específica de Safari para iconos de pestañas fijadas en macOS Safari. Cuando un usuario fija tu pestaña, Safari renderiza una silueta monocromática usando el SVG que declaras a través de <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">. El SVG debe ser un vector de un solo color. Safari ignora cualquier color en el archivo y aplica el atributo color de la etiqueta link en su lugar. Alrededor del 8% del tráfico de escritorio global usa Safari, y las pestañas fijadas son una característica para usuarios avanzados, pero omitir mask-icon significa que tu marca se renderiza como un punto de marcador de posición genérico para esos usuarios. El icono debe ser simple, reconocible a 16x16 y usar formas audaces que se lean claramente en monocromático sin líneas finas o detalles pequeños.

Cinco errores representan la mayoría de configuraciones rotas de favicon. Primero, declarar solo /favicon.ico y omitir las otras cinco variantes, lo que deja iOS y Android con marcadores de posición. Segundo, enviar el tamaño incorrecto de apple-touch-icon (152x152 en lugar de 180x180), que iOS amplia en borrosidad. Tercero, olvidar vincular manifest.json desde el head del HTML, lo que hace que Android ignore completamente los iconos del manifest. Cuarto, usar fondos transparentes en apple-touch-icons, que iOS renderiza como un cuadrado negro en lugar de honrar la transparencia. Quinto, el almacenamiento en caché agresivo del navegador que muestra el favicon antiguo durante semanas después de una actualización. Soluciona el problema del caché añadiendo una cadena de consulta de versión (favicon.ico?v=2) o usando nombres de archivo con hash en tu pipeline de compilación.

Sí, si te importa cómo se ve tu marca en pestañas en modo oscuro. Alrededor del 60% de usuarios ahora ejecutan su SO en modo oscuro por defecto, y un favicon oscuro sobre oscuro (un logo negro en una barra de pestañas gris oscuro) desaparece visualmente. La solución es un favicon SVG con una media query: <link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)"> emparejado con un defecto en modo claro. Dentro del SVG puedes usar CSS para intercambiar colores de relleno basándote en la misma media query. Esto requiere el formato SVG porque PNG no soporta media queries. Los navegadores que no entienden la sintaxis recurren al <link rel="icon"> predeterminado, así que mantienes cobertura completa sin sobrecarga de HTML adicional.

Los navegadores almacenan en caché los favicons agresivamente, a menudo durante una a cuatro semanas, a veces más. Chrome almacena favicons en su base de datos de Favicon sin vencimiento explícito. Safari los almacena por sesión y entre reinicios. Firefox almacena según encabezados estándar de caché HTTP. Si actualizas tu favicon y los usuarios aún ven el antiguo una semana después, el caché es la causa. Tres soluciones funcionan de manera confiable. Primero, añade una cadena de consulta de versión a la URL del favicon (href="/favicon.ico?v=2026"), que los navegadores tratan como un recurso diferente. Segundo, cambia el nombre del archivo completamente (favicon-v2.ico) y actualiza la etiqueta link. Tercero, establece encabezados Cache-Control explícitos en la respuesta del favicon con un max-age corto. Sea cual sea la ruta que elijas, ejecuta una prueba de favicon después de implementar para confirmar que el archivo nuevo se sirve desde el origen.

Un favicon no afecta directamente los rankings de Google, pero afecta la tasa de clics desde resultados de búsqueda, que Google usa como señal indirecta de calidad. Google Search muestra favicons junto a resultados orgánicos en móvil (desde 2019) y escritorio (desde 2020). Las páginas con un favicon claro y marcado obtienen CTR mediblemente más alto que páginas con un favicon faltante o predeterminado. Un estudio SEO de 2023 de 100,000 SERPs encontró un incremento de CTR del 4-8% para resultados con favicons marcados en comparación con aquellos sin. Más allá del CTR, un favicon faltante o roto señala a los usuarios un sitio de baja calidad o abandonado, lo que afecta la confianza y participación. Google requiere que el favicon sea al menos 8x8 píxeles, múltiplo de 8 e indexable desde una URL estable para mostrarlo en resultados de búsqueda.

Sí. Este verificador de favicon acepta cualquier URL pública y obtiene el HTML del lado del servidor, así que puedes auditar tu propio sitio, un competidor o cualquier diseño de referencia. Pega la URL con el protocolo incluido (https://example.com), haz clic en Verificar favicons y la herramienta devuelve cada icono declarado en dos o tres segundos. La verificación funciona en cualquier página, no solo en la página de inicio. Si un sitio usa favicons diferentes en subdominios o secciones, prueba la URL específica que te importa. La herramienta maneja redirecciones, sigue la URL final e informa cualquier 404 en archivos de icono. Úsalo para comprender cómo los sitios líderes en tu industria configuran sus favicons antes de diseñar el tuyo, luego copia los patrones que se mantienen en escritorio y móvil.

/favicon.ico es la ruta de fallback heredada. Los navegadores la solicitan automáticamente desde la raíz del dominio si no se declara otro icono en el HTML. El formato es ICO, un contenedor de Windows que mantiene múltiples resoluciones en un archivo. <link rel="icon"> es la declaración HTML moderna. Apunta a cualquier archivo de icono (PNG, SVG o ICO) en cualquier URL con atributos opcionales sizes y type. Los navegadores prefieren <link rel="icon"> cuando está presente y solo recurren a /favicon.ico si falta o devuelve 404. La mejor práctica es enviar ambos. Declara iconos PNG y SVG modernos a través de <link rel="icon"> para pestañas, y mantén un ICO multi-resolución en /favicon.ico para navegadores antiguos, lectores RSS y rastreadores que solo verifican la ruta raíz.

Tres verificaciones confirman un favicon funcional. Primero, ejecuta un verificador de favicon en la URL de la página para verificar que cada declaración está presente, dimensionada correctamente y devuelve 200. Segundo, actualiza la página con fuerza en tu navegador (Cmd+Shift+R o Ctrl+Shift+F5) para eludir el caché, luego mira la pestaña. Tercero, guarda la página en tu pantalla de inicio de iOS y Android en un dispositivo real para confirmar que esos iconos se renderizan correctamente. Las herramientas de desarrollo del navegador también ayudan. Abre la pestaña Network, filtra por "favicon" y recarga para ver qué archivos de icono solicitó realmente el navegador. Si ves 404s, corrige las rutas y vuelve a implementar. Usa la prueba de favicon en cada implementación para detectar regresiones antes de que los usuarios lo hagan, especialmente después de actualizaciones de framework que cambian las rutas de activos estáticos.

El mejor verificador de favicon es el que audita las seis declaraciones, no solo /favicon.ico. Debe obtener la página del lado del servidor, analizar cada etiqueta link, validar que cada URL de icono devuelva 200, informar el tamaño real del archivo y dimensiones, agrupar resultados por objetivo de dispositivo (escritorio, iOS, Android, Safari fijado) y marcar variantes faltantes. También debe verificar los contenidos de manifest.json, no solo si el manifest está vinculado. Este verificador de favicon cubre las seis verificaciones en una sola pasada y devuelve resultados en menos de tres segundos. Las herramientas de desarrollo del navegador funcionan para verificaciones puntuales pero requieren inspección manual de cada etiqueta link. Los validadores en línea que solo verifican /favicon.ico pierden completamente las variantes modernas. Ejecuta una auditoría completa antes del lanzamiento y después de cada migración de activos estáticos para mantener el conjunto de iconos limpio.