Una landing page SaaS no necesita un paquete complicado de favicons. Necesita un icono reconocible al tamaño de una pestaña, una URL estable y etiquetas que los navegadores y rastreadores puedan interpretar.
El favicon es un detalle de calidad de producto y de marca, pero no hay base para presentarlo como una palanca de conversión demostrada. Trátalo como parte de la interfaz, pruébalo en dispositivos reales y evita atribuirle resultados comerciales no verificados.
Una configuración práctica
El estándar HTML define rel='icon' para los iconos de página y permite sizes='any' en recursos escalables como SVG. Un archivo ICO sigue siendo útil como respaldo de compatibilidad, mientras que el Apple touch icon es opcional para quienes añadan el sitio a la pantalla de inicio de un dispositivo Apple.
<link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>Los nombres y atributos deben coincidir con los archivos que publicas. El estándar HTML explica la relación icon y el atributo sizes. La documentación de Web Clip de Apple describe el touch icon.
Diseña para la superficie más pequeña
Usa un símbolo, no el nombre completo
El nombre completo del producto suele resultar ilegible en una pestaña. Empieza por la forma más sencilla y distintiva del logotipo y revísala a 16×16 y 32×32 píxeles. Si la silueta se pierde, elimina detalle antes de aumentar la resolución.
Comprueba interfaces claras y oscuras
Un dibujo oscuro y transparente puede desaparecer en una barra oscura; uno demasiado claro puede perderse en una interfaz clara. Prueba ambos entornos. Si un único archivo no conserva el contraste, considera un tratamiento SVG bien probado; la guía de favicon para modo oscuro explica esa opción.
Mantén estable la URL
Sustituir la imagen bajo la misma URL puede dejar una versión antigua en la caché del navegador o del rastreador. Cuando el diseño cambie de verdad, usa una URL versionada y actualiza la etiqueta una sola vez.
Google Search aplica reglas distintas
Que el icono aparezca en la pestaña no garantiza que se muestre igual en los resultados de búsqueda. La guía actual de Google exige una imagen cuadrada de al menos 8×8 píxeles, recomienda una mayor de 48×48 y requiere que la página principal y el archivo sean rastreables. También indica que la aparición no está garantizada.
Usa la documentación oficial de favicons en Google Search como fuente y conserva una URL estable. No conviertas la recomendación de superar 48×48 en la afirmación falsa de que todos los navegadores exigen exactamente 48×48.
Lista de comprobación
- Abre directamente la URL del icono y confirma que devuelve una imagen correctamente.
- Revisa el código fuente y comprueba que existen todos los archivos declarados.
- Prueba una pestaña normal, un acceso guardado si es relevante y los temas claro y oscuro.
- Evalúa el icono a tamaño pequeño, no solo el logotipo original.
- Tras publicar, da tiempo a que se actualicen las cachés y los rastreadores.
Para inspeccionar primero los archivos de un sitio existente, consulta la guía para descargar favicons. Un conjunto pequeño, coherente y verificado es mejor que un paquete grande cuyas declaraciones no coinciden con los archivos.