Etiquetas HTML para los iconos de acceso directo en Android, iPhone y otras aplicaciones

Tabla de contenidos

9. Etiquetas HTML para los iconos de acceso directo en Android, iPhone y otras aplicaciones
- 9.1. Pasos a seguir para incluir los iconos de acceso directo a tu web en Android, iPhone u otros.
9.2. ¿Cómo añadir el acceso directo de mi web al escritorio de mi Smartphone mediante Google Chrome?
9.3. ¿Cómo añadir el acceso directo de mi web al escritorio de mi Smartphone mediante Firefox?

9. Etiquetas HTML para los iconos de acceso directo en Android, iPhone y otras aplicaciones

Insertar el acceso directo a las webs que más utilizamos es extremadamente útil tanto en el “escritorio” de nuestro smartphone o tablet, como en la página principal de nuestros navegadores favoritos. De esta forma en un solo clic conseguimos estar en la web o aplicación que deseemos.

Para incluir estos accesos directos o iconos identificativos en las pantallas de los smartphones, tablets o navegadores podemos insertar etiquetas especiales en nuestro código HTML. Lo que conseguiremos mediante estas etiquetas es incluir los iconos tipo App de nuestra web en diferentes resoluciones para que sean visibles y con buena calidad.

9.1. Pasos a seguir para incluir los iconos de acceso directo a tu web en Android, iPhone u otros.

Crea el icono de tu web tipo App de un tamaño grande para no perder calidad (ejemplo 1024x1024px).
Crea los diferentes tamaños exigidos para cada tipo de dispositivo. Mediante esta aplicación online gratuita puedes subir la imagen creada en el punto 1 y te llega un correo electrónico con todas las imágenes preparadas en un archivo comprimido.
Guarda los diferentes tamaños que necesites en una carpeta organizada en tu espacio web.
Añade las etiquetas necesarias en tu código html.

Para empezar está bien con incluir las siguientes etiquetas <link> en el <head> de tu código HTML:

< link href="http://www.tuweb.com/img/apple-touch-icon.png" rel="apple-touch-icon" />
< link href="http://www.tuweb.com/img/icon-hires.png" rel="icon" sizes="192x192" />
< link href="http://www.tuweb.com/img/icon-normal.png" rel="icon" sizes="128x128" />

Ejemplo de código o etiquetas que solemos utilizar en nuestros proyectos:

See the Pen Etiquetas útiles by Eniun (@Eniun) on CodePen.0

9.2. ¿Cómo añadir el acceso directo de mi web al escritorio de mi Smartphone mediante Google Chrome?

Abre Google Chrome y carga la página que quieres añadir como acceso directo en tu smartphone.
Pulsa sobre el menú, los tres puntos de la esquina superior derecha.
Elige “Añadir a pantalla de inicio” y tendrás el acceso directo a la web en tu escritorio principal.

9.3. ¿Cómo añadir el acceso directo de mi web al escritorio de mi Smartphone mediante Firefox?

Abre Firefox y carga la página que quieres añadir como acceso directo en tu smartphone.
Ve al menú superior derecho, el de los tres puntos, y selecciona “Página”.
Desciende hasta “Añadir acceso directo a página” y selecciona “aquí”.