Comprobar un favicon

Un icono pequeño que tiene que verse bien en todas partes

Un favicon es la imagen diminuta que aparece en la pestaña del navegador, en los marcadores, en el historial y en los resultados de búsqueda en el móvil. Mide solo de 16 a 48 píxeles en pantalla, y aun así es de las primeras cosas que la gente asocia con tu marca. Como es tan pequeño, los detalles que se ven bien en un logo grande se convierten en una mancha, y problemas como una forma equivocada, un fondo que desaparece en pestañas oscuras o un tamaño que falta se pasan por alto fácilmente. Este comprobador te da un veredicto rápido de tu archivo.

Qué comprueba

• Formato: PNG, SVG e ICO los admiten todos los navegadores modernos. Formatos como JPG o WebP funcionan en la mayoría, pero no son la elección habitual.
• Peso del archivo: un favicon se carga en cada visita, así que debe ser ligero, menos de 100 KB y normalmente mucho menos.
• Forma: debe ser cuadrado. Una imagen rectangular la estiran o recortan los navegadores.
• Resolución: los navegadores usan iconos de 16 y 32 píxeles, los móviles y los accesos directos usan 48, 180 y 192, y las aplicaciones web progresivas necesitan 192 y 512.
• Transparencia: un fondo transparente deja que el icono se vea en pestañas claras y oscuras. Un fondo sólido está bien si es intencionado.
• Contenido del ICO: un archivo .ico puede contener varios tamaños a la vez. La herramienta lee cuáles lleva dentro.

Cómo es un conjunto completo

Una configuración moderna necesita pocos archivos: un icon.svg que se escala a cualquier tamaño, un favicon.ico con imágenes de 32 o 48 píxeles para navegadores antiguos, un apple-touch-icon.png de 180 por 180 píxeles para iPhone e iPad, y un manifiesto de aplicación web con iconos de 192 y 512 píxeles para Android y aplicaciones instalables. La herramienta muestra un bloque de etiquetas que puedes adaptar, con los nombres de archivo que elijas.

Vista previa sobre claro y oscuro

El mismo icono puede verse perfecto sobre una pestaña blanca y desaparecer sobre una oscura. La vista previa muestra el archivo a sus tamaños reales sobre los dos fondos, así que un icono negro con transparencia que se pierde en modo oscuro se detecta con facilidad.

Límites

Los navegadores no pueden leer los archivos de otra web, así que esta herramienta trabaja con un archivo que subes, no con una dirección web. Solo mira el archivo de tu dispositivo, que no se envía a ningún sitio. Para el diseño del propio icono, recuerda que el detalle fino y el texto no sobreviven a 16 píxeles, así que una forma simple y contundente funciona mejor.