NorfiPC
NorfiPC » Web » HTML, iconos

Iconos para agregar las páginas en la pantalla, Inicio y el escritorio



Etiquetas con los formatos y medidas de las imágenes, para para poder anclar, fijar o añadir un blog o sitio web, a la pantalla de los móviles con Android, iOS y en el escritorio o la pantalla Inicio en Windows.
Iconos para agregar páginas en la pantalla, Inicio y el escritorio
Los navegadores modernos buscan y extraen del HTML de las páginas, los iconos para representarlas en la barra de título y en las nuevas pestañas.
También cuando decidimos guardarla en la pantalla de los dispositivos móviles, en el escritorio o en los mosaicos de inicio de Windows.
Un icono llamativo y con la resolución correcta, mejora mucho la imagen de nuestro blog o sitio web.
En este artículo explicamos las etiquetas (tags) que debemos agregar al HTML y el formato y tamaño de las imágenes.



Iconos para agregar a la pantalla de inicio


Los iconos son usados en las siguientes tareas.
- En Android al guardar una página con el navegador Chrome, podemos escoger en el menú: "Agregar a pantalla principal".
- Otros navegadores móviles como Opera Mini, Puffin y Dolphin, también ofrecen una opción similar: "Añadir a la pantalla de inicio".
- En Windows con el navegador Google Chrome podemos escoger en Opciones > Más herramientas: "Añadir al escritorio".
- En Windows con el navegador Microsoft Edge, podemos usar la opción: "Anclar esta página a inicio", de esa forma el icono se muestra en la columna de inicio y en la pantalla de las miniaturas o tiles.
Si no especificamos un icono para cualquiera de estas tareas, el navegador empleará uno genérico o predeterminado.



Formato de los iconos para la web


Tradicionalmente los iconos que representan a un sitio web, para ser usados por el navegador, se almacenaban en un archivo de extensión ICO, llamado favicon, el que puede almacenar iconos de distintos tamaños y medidas.
Los más frecuentes son 16x16, 24x24, 32x32 y 48x48 en pixeles.
Lee más información en otro artículo: Como crear un favicon para un blog o sitio web
Todavía funciona el sistema y los navegadores leen correctamente el archivo favicon.ico, pero debido a la exigencia de iconos de mayor resolución para pantallas más exigentes, ahora es opcional definir imágenes en otras medidas, usando etiquetas, que difieren en cada plataforma.
En el caso de aplicaciones web es obligatorio.
Los iconos deben ser creados en el formato PNG con transparencia, en cualquier editor de imágenes que lo permita.
El tamaño depende de los navegadores como se especifica más abajo.



Etiquetas e iconos para Google Chrome y Opera


Los navegadores Google Chrome y Opera usan el archivo icon.png y lo adaptan al tamaño necesario del dispositivo.
El tamaño de los íconos debe estar basado en 48 pixeles, por ejemplo, 48 px, 96 px, 144 px, y 192 px.
No obstante si se emplea un solo icono se recomienda que sea de 192 pixeles.
Para eso debemos usar la siguiente etiqueta:
<link rel="icon" sizes="192x192" href="icon.png">
En la página de desarrolladores de Google recomiendan un icono de 192 pixeles, pero debemos de tener en cuenta que a mayor tamaño, aumenta la transferencia de datos desde el servidor.
En mi caso he comprobado en Windows, que obtengo más nitidez con un icono de 128 pixeles.

Agregar a la pantalla de inicio en Chrome

En Chrome la opción: "Agregar a la pantalla de inicio" solo está disponible para aplicaciones web o nativas.
Para convertir una página en aplicación es necesario agregar metadatos.
La siguiente etiqueta exigida hasta el lanzamiento de Chrome 39 ya no es obligatoria:
<meta name="mobile-web-app-capable" content="yes">
Ahora es necesario usar un archivo manifiesto (manifest.json), referido por la siguiente etiqueta:
<link rel="manifest" href="manifest.json">
Lee más información: Banners de instalación de apps web



Etiquetas para Safari en dispositivos con iOS


En dispositivos con iOS (iPhone e iPad), las páginas se pueden agregar a la pantalla de inicio siendo representadas por un icono personalizable, opción llamada Web Clips.
Para representar todas las páginas de un sitio, debemos situar una imagen llamada "apple-touch-icon.png" en la raíz del sitio.
Posteriormente usar la siguiente etiqueta en la plantilla del sitio o todas las páginas:
<link rel="apple-touch-icon" href="apple-touch-icon.png ">
También se puede hacer referencia a varios iconos de distinto tamaño, para distintos dispositivos, usando el atributo "size" de la siguiente forma:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
También en Safari es posible usar otros parámetros de personalización usando etiquetas, por ejemplo para especificar una imagen y un icono, que se muestra antes que cargue la aplicación, para ocultar la interface del navegador y para cambiar la apariencia de la barra de estado.
Lee más información: Safari, Configuring Web Applications



Etiquetas para Microsoft Edge


Los navegadores Internet Explorer y Microsoft Edge, en Windows 8.1 y Windows 10, permiten especificar los iconos que se van a mostrar en Inicio, al guardar una página usando la opción "Anclar esta página a Inicio".
Hay dos opciones: un icono estático y un icono dinámico, como lo usan las aplicaciones nativas, que puede mostrar imágenes diferentes, texto y notificaciones.
Para crear solo un icono estático, debemos suministrar dos imágenes, una de 70 x 70 pixeles y otra de 150 x 150 px.
A continuación usar uno de los siguientes métodos:
1- Crear un archivo XML llamado "browserconfig.xml" que debe estar en la raíz del sitio, con el siguiente contenido:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="logo70.png"/>
      <square150x150logo src="logo150.png"/>
    </tile>
  </msapplication>
</browserconfig>
De esta forma se usan los mismos iconos para todas las páginas del sitio.
2- Usar las siguientes etiquetas en cada página de forma individual.
<meta name="msapplication-square70x70logo" content="logo70.png">
<meta name="msapplication-square150x150logo" content="logo150.png">
Para crear un icono dinámico se requiere un archivo browserconfig.xml más complejo, 4 iconos de diferente tamaño, una plantilla y al menos tres archivos de esquemas que refieren las imágenes y notificaciones.
Lee más información: Crear un icono dinámico en Windows



Personalizar los colores del navegador


Además de especificar los iconos, en varias plataformas y navegadores móviles podemos especificar el color y otras opciones de personalización de nuestras páginas, usando etiquetas.

Etiquetas de color para Chrome y Opera

La siguiente etiqueta cambia el color usado en la barra de direcciones.
De esta forma podemos usar un color de acuerdo al estilo de nuestro sitio.
Un ejemplo lo vemos en la web de Facebook cuando accedemos con el móvil.
<meta name="theme-color" content="#4285f4">

Cambiar la apariencia de la barra de estado en iOS

Para cambiar la apariencia de la barra de estado en el iPho o iPad, podemos usar una de las dos etiquetas:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Páginas relacionadas



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar