EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

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

            Etiquetas acceso directo

            etiquetas html acceso directo web iphone android

            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.

            Contenidos del artículo

            • 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? 

            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.

            1. Crea el icono de tu web tipo App de un tamaño grande para no perder calidad (ejemplo 1024x1024px).
            2. 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.
            3. Guarda los diferentes tamaños que necesites en una carpeta organizada en tu espacio web.
            4. 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í”.

            Navegación de entradas

            ← Marcos o frames en html, una tecnología obsoleta
            Metaetiquetas o metatags para redes sociales en HTML →

            Tutorial HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Metainformación en HTML
            • 12. Configuración metaetiqueta viewport, web responsive
            • 13. Resumen HTML
            • 14. Ejercicios resueltos HTML

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados