Los navegadores modernos facilitan la personalización de ciertos componentes, como los íconos, el color de la barra de direcciones y, incluso, agregar elementos como tarjetas personalizadas. Estos ajustes sencillos pueden aumentar la participación y hacer que los usuarios regresen a tu sitio.
Los navegadores modernos facilitan la personalización de ciertos componentes, como los íconos, el color de la barra de direcciones y, incluso, agregar elementos como tarjetas personalizadas. Estos ajustes sencillos pueden aumentar la participación y hacer que los usuarios regresen a tu sitio.
Proporciona íconos y tarjetas de gran calidad
Cuando un usuario visita tu página web, el navegador intenta recuperar un ícono del código HTML. El ícono puede aparecer en muchos lugares, como la pestaña del navegador, el selector de apps recientes, la página de pestañas nuevas (o visitadas recientemente) y mucho más.
Si proporcionas una imagen de alta calidad, tu sitio será más reconocible, lo que facilitará que los usuarios lo encuentren.
Para que todos los navegadores sean totalmente compatibles, 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 el dispositivo escala al tamaño necesario. Para evitar el escalamiento 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
La nueva experiencia de la 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 quieres 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 dinámicos" rotativos de Microsoft van mucho más allá de otras implementaciones y exceden el alcance de esta guía. Puedes obtener más información en la página de MSDN Cómo crear mosaicos dinámicos.
Elementos de color del navegador
Con diferentes elementos meta, puedes personalizar el navegador y
hasta elementos de la plataforma. Ten en cuenta que algunas solo funcionan en ciertas
plataformas o navegadores, pero pueden mejorar mucho la experiencia.
Chrome, Firefox OS, Safari, Internet Explorer y Opera Coast te permiten definir colores para los elementos del navegador, e incluso la plataforma, mediante metaetiquetas.
Color del tema de metadatos para Chrome y Opera
Para especificar el color del tema de Chrome en Android, usa el color del metatema.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Estilo específico de Safari
Safari te permite aplicar diseño a 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. Puedes evitar esto
indicándole a Safari que muestre una imagen de inicio explícita, agregando 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 detalles.
Si bien la documentación de Apple es escasa sobre este tema, la comunidad de desarrolladores descubrió una forma de segmentar todos los dispositivos con consultas de medios avanzadas para seleccionar el dispositivo adecuado y, luego, especificar la imagen correcta. Aquí tienes una solución que funciona, cortesía de tfausak's gist
Cómo cambiar 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 pantalla completa, en lugar de empujarlo 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