Íconos y colores de los navegadores

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 hacer que los usuarios vuelvan 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 hacer que los usuarios vuelvan a tu sitio.

Proporciona íconos y tarjetas geniales

Cuando un usuario visita tu página web, el navegador intenta obtener un ícono a partir del código HTML. El ícono puede aparecer en muchos lugares, como la pestaña del navegador, el cambio reciente de app, la página de pestaña nueva (o visitada recientemente), entre otros.

Proporcionar una imagen de alta calidad hará que tu sitio sea más reconocible, lo que facilitará que los usuarios lo encuentren.

Para ser totalmente compatibles con todos los navegadores, deberá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 según 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 archivo PNG no transparente de 180 o 192 px es ideal para el ícono de Apple Touch.

No se recomienda incluir varias versiones mediante el atributo sizes. Anteriormente, en Safari para iOS, se consideraba la palabra clave -precomposed para evitar agregar efectos visuales, pero no era necesario desde iOS 7.

Internet Explorer y Windows Phone

La nueva experiencia de pantalla principal de Windows 8 admite cuatro diseños diferentes para los sitios fijados y requiere 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">

Mosaicos en Internet Explorer

Los "sitios fijados" y los "mosaicos" rotativos de Microsoft trascienden otras implementaciones y están fuera del alcance de esta guía. Puedes obtener más información en la página de MSDN sobre cómo crear tarjetas activas.

Elementos del navegador de color

Con diferentes elementos meta, puedes personalizar el navegador y hasta los elementos de la plataforma. Ten en cuenta que algunos solo funcionan 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 de la plataforma mediante metaetiquetas.

Color del tema Meta para Chrome y Opera

Para especificar el color de tema de Chrome en Android, usa meta theme color.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Colores del tema que aplican un estilo a la barra de direcciones en Chrome

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 evitarlo, puedes indicar a Safari que muestre una imagen de inicio explícita. Para ello, agrega 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 de contenido web de Safari para obtener más información.

Si bien la documentación de Apple no es precisa sobre este tema, la comunidad de desarrolladores descubrió una manera de incluirla en todos los dispositivos mediante consultas de medios avanzadas para seleccionar el dispositivo adecuado y, luego, especificar la imagen correcta. Esta es una solución funcional, cortesía de tfausak's gist.

Cambia la apariencia de la barra de estado

Puedes cambiar el aspecto 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 dará más altura al diseño, pero obstruirá la parte superior. Este es el código requerido:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Captura de pantalla con negro translúcido.
Captura de pantalla con black-translucent

Captura de pantalla con negro
Captura de pantalla con black