Los navegadores modernos facilitan la personalización de ciertos componentes, como los íconos y el color de la barra de direcciones, e incluso la adición de elementos como mosaicos personalizados. Estos simples ajustes pueden aumentar la participación y lograr que los usuarios regresen a tu sitio.
Los navegadores modernos facilitan la personalización de ciertos componentes, como los íconos y el color de la barra de direcciones, e incluso la adición de elementos como mosaicos personalizados. Estos simples ajustes pueden aumentar la participación y lograr que los usuarios regresen a tu sitio.
Brinda íconos y tarjetas geniales
Cuando un usuario visita tu página web, el navegador intenta obtener un ícono a partir del lenguaje HTML. El ícono puede aparecer en varios lugares, como la pestaña del navegador, el cambio reciente de app, la página de pestaña nueva (o visitada más recientemente), entre otros.
Proporcionar una imagen de alta calidad hará que tu sitio sea más reconocible y facilitará la búsqueda de tu sitio para los usuarios.
Para ser totalmente compatibles con todos los navegadores, necesitarás agregar algunas etiquetas al elemento <head> de cada página.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome y Opera
Chrome y Opera usan icon.png, que se adapta al tamaño necesario por el dispositivo. Para evitar el ajuste de escala automático, también puedes proporcionar tamaños adicionales especificando el atributo sizes.
Safari
Safari también usa la etiqueta <link> con el atributo rel: apple-touch-icon para indicar el ícono de la pantalla principal.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Un PNG no transparente de 180 px o 192 px cuadrados es ideal para el apple-touch-icon.
No se recomienda incluir varias versiones a través del atributo sizes.
Anteriormente, Safari para iOS consideraba la palabra clave -precomposed para evitar agregar efectos visuales, pero no es necesario desde iOS 7.
Internet Explorer y Windows Phone
En la nueva experiencia de pantalla principal de Windows 8, se presentan cuatro diseños diferentes para los sitios fijados y se deben usar cuatro íconos. Puedes omitir las metaetiquetas relevantes si no deseas admitir un tamaño específico.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Tarjetas en Internet Explorer
Los “sitios anclados” y los “íconos dinámicos” rotativos de Microsoft trascienden ampliamente otras implementaciones y se encuentran más allá del alcance de esta guía. Puedes obtener más información en la sección de MSDN sobre cómo crear tarjetas dinámicas.
Cómo agregar color a los elementos del navegador
Con diferentes elementos meta, puedes personalizar el navegador y hasta los elementos de la plataforma. Ten en cuenta que algunos solo pueden funcionar en ciertas
plataformas o navegadores, pero pueden mejorar notablemente la experiencia.
Chrome, Firefox OS, Safari, Internet Explorer y Opera Coast te permiten definir los colores de los elementos del navegador e incluso la plataforma a través de metaetiquetas.
Metaetiqueta theme color para Chrome y Opera
Usa la metaetiqueta theme color para especificar el color de tema para Chrome en Android.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Estilos específicos de Safari
Safari te permite definir el estilo de la barra de estado y especificar una imagen de inicio.
Especifica una imagen de inicio
De forma predeterminada, Safari muestra una pantalla en blanco durante el tiempo de carga y, después de varias cargas, una captura de pantalla del estado anterior de la app. Para evitar que esto suceda, dile a Safari que muestre una imagen de inicio explícita si agregas una etiqueta de vínculo con rel=apple-touch-startup-image. Por ejemplo:
<link rel="apple-touch-startup-image" href="icon.png">
La imagen debe tener el tamaño específico de la pantalla del dispositivo de destino; de lo contrario, no se usará. Consulta los Lineamientos sobre el contenido web de Safari para obtener más información.
Aunque la documentación de Apple no es precisa con respecto a este tema, la comunidad de desarrolladores ha descubierto una forma de incluir a todos los dispositivos usando consultas avanzadas de medios para seleccionar el dispositivo adecuado y luego especificar la imagen correcta. Esta es una solución útil, cortesía del gist de tfausak
Cambia la apariencia de la barra de estado
Puedes cambiar la apariencia de la barra de estado predeterminada a black o black-translucent. Con black-translucent, la barra de estado flota sobre el contenido de la pantalla completa en lugar de desplazarlo hacia abajo. Esto le da más altura al diseño, pero obstruye la parte superior. Este es el código requerido:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black