Comprobador de favicon y auditoría de preview

La auditoría descarga el HTML, /favicon.ico y los iconos declarados

Escribes la URL de la página o solo el dominio. Si falta el esquema, la petición usa https. El servidor baja ese HTML y recoge las etiquetas link con rel icon, shortcut icon, apple-touch-icon, mask-icon y fluid-icon. Si hay un link rel=manifest, pide el manifiesto y cada src de icons. Para los tiles de Windows usa la URL de msapplication-config cuando existe; si esa meta no está, prueba /browserconfig.xml. Cuando el XML responde, lee los logos 70×70, 150×150, 310×150 y 310×310. Si la página trae msapplication-tileimage, esa imagen entra con tamaño declarado 144×144. /favicon.ico de la raíz se pide siempre, aunque el HTML ya enlace otros archivos.

Cada recurso se descarga aparte. La tarjeta muestra el origen (html, manifest, browserconfig o default), el rel, 200 OK o Failed, Declared Sizes, Actual Sizes, Content-Type y File Size en KB. Un PNG sale como ancho×alto. Un SVG puede salir como ancho×alto o como Vector (SVG). Un ICO que no se decodifica a un ancho y un alto queda como ICO Format, y en ese caso no se compara el sizes con unos píxeles. Si el sizes declarado no contiene el tamaño real, si el MIME no corresponde a la extensión, o si la URL no responde 200, la nota lo dice. Un SVG tiene que servirse como image/svg+xml, un ICO como image/x-icon y un PNG como image/png.

Los tamaños habituales son 16×16, 32×32, 180×180, 192×192 y 512×512

En la pestaña clásica se usan 16×16 y 32×32, en ICO o PNG. Muchos navegadores siguen pidiendo /favicon.ico aunque no lo declares en el HTML. Para una pantalla densa, un PNG de 32×32 o 48×48 con el atributo sizes se ve más nítido. El apple-touch-icon de la pantalla de inicio en Apple va a 180×180, en PNG. En el manifiesto de Android y de una PWA los tamaños que se declaran en icons suelen ser 192×192 y 512×512. Un favicon SVG escala en navegadores actuales; confirma que el servidor lo entregue como image/svg+xml.

La cifra de KB está en la tarjeta. Un PNG de varios cientos de KB se ve en ese número y alarga las cargas que se repiten. Comprime o sirve un archivo del tamaño que realmente usas. Si el icono es WebP, la nota te avisa de que ese formato no es el más seguro para un favicon y que ICO o PNG cubren más clientes.

Google pide un icono cuadrado, rastreable y múltiplo de 48 px

Para el favicon del resultado de búsqueda, Google suele necesitar una URL cuadrada y estable, que se pueda rastrear, en un múltiplo de 48 px, y que robots.txt no bloquee. No usa cada etiqueta de icono de la página. Esta auditoría enseña lo que exponen el HTML y /favicon.ico. No consulta el índice de Google ni Search Console, así que no confirma qué archivo acabará en la búsqueda.

Si un rel=icon que no es de Apple mide menos de 48 px de lado, la nota lo indica y escribe el tamaño encontrado. Cambiar el archivo no borra al momento el icono que el buscador ya guardó. Aquí tampoco se lee robots.txt. Si crees que la ruta del icono está bloqueada, revisa esas reglas en otra pasada.

Un 200, un 404 y un MIME que no es imagen se leen distinto

Un caso sano deja /favicon.ico en 200, las dimensiones del PNG coinciden con lo declarado cuando se pueden medir, hay un apple-touch-icon de 180×180 y los iconos del manifiesto responden 200. La falta de un SVG sigue siendo un aviso: el vector no es obligatorio para que el resto de archivos sea válido, y la herramienta lo señala igual.

Si el HTML tiene iconos y /favicon.ico no responde 200, el diagnóstico de soporte legado queda en error, porque algunos navegadores y rastreadores piden esa ruta por defecto. Un manifiesto declarado cuyos iconos no responden también es error. Un enlace de manifiesto ausente es aviso. Si no hay ningún apple-touch-icon válido, el diagnóstico de iOS es error; si hay icono y ninguno mide 180×180, es aviso.

Cuando el servidor devuelve text/html o application/octet-stream en la URL del icono, la nota cita el tipo recibido. El arreglo está en el CDN o en el origen. La puntuación parte de 100 y solo usa cuatro diagnósticos: apple-touch-icon, favicon SVG, manifiesto y /favicon.ico. Resta 25 por cada error y 10 por cada aviso, con suelo en 0. La letra es A+ desde 95, A desde 90, B desde 80, C desde 70, D desde 50 y F por debajo de 50. Una nota de MIME o de sizes en la tarjeta no mueve esa cifra por sí sola. Úsala para ordenar el arreglo, no como predicción de ranking.

Los mockups aproximan la pestaña y la pantalla de inicio

Los mockups son una comprobación visual. Puedes pasar la pestaña entre claro y oscuro, ver una aproximación de resultado de búsqueda, el icono al guardar en la pantalla de inicio de iOS, la forma en Android (círculo, squircle o cuadrado) y la máscara de Safari. El nombre sale del manifiesto (name o short_name) o, si no hay, del dominio. El color sale de la meta theme-color. Si esa meta no existe, el mockup usa un azul de reserva (#3b82f6), no un color de tu marca.

Si el recuadro sale vacío, mira el HTTP y el MIME de esa tarjeta antes de tocar el diseño. Un 404, o un HTML servido donde debía ir una imagen, no se puede dibujar. Esas vistas aproximan la pestaña y la pantalla de inicio; no reproducen cada variante de la SERP de Google. Copia la URL del archivo desde la tarjeta y ábrela directa si el estado no cuadra con lo que el HTML declaraba. Cada icono se pide con un límite de 6 segundos. El manifiesto y el browserconfig tienen 5 segundos. Si esa petición no llega, la tarjeta no queda en 200.