Cómo agregar un sitio web iconos para 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, 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, 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 sitio web en el iPhone, iPad y iPod de pantalla Inicio

Hacemos esto abriendo una página web en el iPhone (navegador de Internet Safari, Chrome, etc.), haciendo clic en el cuadrado con la flecha (el signo de "compartir" en iOS), luego la opciónAñ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 íconos estándar para iPhone, iPad, iPod y Android

  • Modelos clásicos 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:

<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, 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.

Sitio web iPhone Icon

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

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

Sobre la autora

Stealth

Apasionado de todo lo relacionado con los gadgets y las TI, escribo con placer en sigilosettings.com desde 2006 y me gusta descubrir contigo cosas nuevas sobre computadoras y sistemas operativos macSO, Linux, Windows, iOS y Android.

Deja un comentario