Cómo agregar un sitio web iconos para iPhone, iPad y iPod Touch

Favicon.ico - Icono de la Página Web en el explorador

Antes de que se puso en marcha un sitio web y añadir un archivo de gráficos, favicon, que aparece 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. Este favicon se agrega para ayudar a los usuarios a identificar una dirección web en los marcadores más rápidamente.

Sigilo Settings favicon

Sigilo Settings Favicon en Safari

Favicon en Opera

Favicon en Opera

Hasta hace poco, este archivo debe ser de la forma "favicon.ico", Para ser identificado por el navegador web. Chrome, Internet Explorer, Opera, 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 </ head>, Sea esta línea:

<Link rel = "icono de acceso directo" href = "/ images / favicon.ico" type = "image / x-icon" />

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, Protectores si iPod Touch.

Cómo agregar un acceso directo sitio web en el iPhone, iPad y iPod de pantalla Inicio

Hacemos esto mediante la apertura de un sitio web en el iPhone (Safari, Chrome, navegador de Internet, etc.), haga clic en el cuadrado con la flecha (el signo de "compartir" en IOS), entonces la opción "Añadir a 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

  • Los modelos clásicos de iPhone / iPod = 57 57 ×
  • IPAD = 76 76 ×
  • iPhone / iPod Retina × = 120 120
  • iPad Retina × = 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
  • Alta resolución de Android (alta resolución) = 192 × 192

iconos

Después de hacer las imágenes, subir en el servidor web, el código HTML de la página web antes del cierre </ head>, añada las siguientes líneas:

<link href="/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="/icon-hires.png" rel="icon" sizes="192x192" /> <link href="/icon-normal.png" rel="icon" sizes="128x128" />

Para dispositivos Apple, el nombre de la imagen .PNG y "rel =" deben contener el prefijo "apple-". Para Android, el nombre del archivo será "icono hires.png"Y"icono normal.png"Con rel =" icono ".

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

Sitio web iPhone Icon

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

Cómo agregar un sitio web iconos para iPhone, iPad y iPod Touch

Sobre el Autor

Sigilo

Apasionado por todo lo que significa gadget y TI, escribo con gusto en stealthsettings.com de 2006 y me encanta descubrir cosas nuevas sobre computadoras y macOS, sistemas operativos Linux, Windows, iOS y Android.

Deja un comentario