Cómo agregar íconos a un sitio web iPhone, iPad y iPod Touch

Favicon.ico - Icono de sitio web en el navegador

Antes de que se puso en marcha un sitio web y añadir un archivo de gráficos, favicon, para que aparezca en el navegador, en la barra de direcciones. En la mayoría de las situaciones, el favicon es una miniatura del logotipo gráfico o las iniciales del sitio web respectivo. Este favicon se agrega para ayudar a los usuarios a identificar rápidamente una dirección web en los marcadores.

Stealth Settings favicon
Stealth Settings Favicon en Safari
Favicon en Opera
Favicon en Opera

Hasta hace poco, este archivo tenía que estar en forma "favicon.ico", para ser identificado por el navegador web. Chrome, Internet Explorer, Ópera, Safari, Firefox, etc
Desde hace varios años, con el avance de nuevos lenguajes web, HTML5 si CSS3, Favicons puede ser una .png o .jpg. La condición es que la cabecera de la página, antes de, Sea esta línea:

Icono de sitio web para iOS - iPhone, iPad y iPod Touch

In iOS Podemos añadir los accesos directos de las páginas web pe pantalla de InicioCPC iPhone, iPad si iPod Touch.

Cómo agregar un acceso directo a un sitio web en iPhone, Pantalla de inicio de iPad y iPod

Hacemos esto abriendo una página web en iPhone (Safari, Chrome, navegador de Internet, etc.), haga clic en el cuadrado con la flecha (el signo de "compartir" en iOS), luego en la opción "Add a la pantalla de inicio".

Si el sitio se ha fijado favicon para su navegador, pero no se establece sitios icono específico de dispositivos iOS, La pantalla aparecerá un icono que consiste en una previsualización de la imagen página web.

Cómo agregar iconos web para iPhone, iPad y Android.

El primer paso es crear un icono de imagenQue aparecen en pantalla de Iniciocomunidad iDevice CPC. Para icono de la web es compatible en todos los dispositivos y de ver con claridad, hay que crear una imagen para todas las resoluciones de iPhone y iPad.

Resoluciones y tamaños de iconos estándar para iPhone, iPad, iPod y Android

  • Modelele clasico de iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • Retina de iPad = 152 × 152
  • iPhone 6 / 6S Plus = 180 × 180

Apple actualizada regularmente tamaño de los iconos recomendadaURL aplicaciones si páginas web pe esta página.

Para el Android dispositivos, los iconos son dos dimensiones:

  • Android clásico = 128 × 128
  • Android con alta resolución (alta resolución) = 192 × 192
iconos

Después de haber realizado las imágenes, se carga en el servidor web, y en la fuente HTML del sitio web, antes de cerrar. , se agregan las siguientes líneas:

<enlace href="/apple-touch-icon.png ”rel =”apple-touch-icon ”/> <enlace href="/apple-touch-icon-76 × 76.png ”rel =”apple-touch-icon ”tamaños =” 76 × 76 ″ /> <enlace href="/apple-touch-icon-120 × 120.png ”rel =”apple-touch-icon ”tamaños =” 120 × 120 ″ /> <enlace href="/apple-touch-icon-152 × 152.png ”rel =”apple-touch-icon ”tamaños =” 152 × 152 ″ /> <enlace href="/apple-touch-icon-180 × 180.png ”rel =”apple-touch-icon ”tamaños =” 180 × 180 ″ />

Para dispositivos Apple, El nombre de la imagen .PNG y "rel =" deben contener el prefijo "apple- ". Para Android, los nombres de los archivos serán "icono hires.png"Y"icono normal.png”Con rel =” icono ”.

No es absolutamente necesario crear imágenes para cada resolución. Puede crear una imagen con la resolución más alta, y los dispositivos con una resolución más baja la identificarán y la establecerán como un icono.

iPhone-Icono de sitio web

El icono de acceso directo al sitio web se verá similar a cualquier aplicaciones para iOS.

Apasionado por la tecnología, escribo con gusto en StealthSettings.com desde el año 2006. Tengo una amplia experiencia en sistemas operativos: macOS, Windows y Linux, así como en lenguajes de programación y plataformas de blogs (WordPress) y para tiendas en línea (WooCommerce, Magento, PrestaShop).

Cómo » iHowTo » iHowTo - iOS » Cómo agregar íconos a un sitio web iPhone, iPad y iPod Touch
Deja un comentario