Favicon.ico – Icono de sitio web en el navegador

Antes de lanzar un sitio web, se agrega un archivo gráfico, favicon, que aparecerá 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 de las iniciales del sitio web respectivo. Este favicon se agrega para ayudar a los usuarios a identificar más rápidamente una dirección web en los marcadores.

Hasta hace poco, este archivo tenía que tener el formato formulario “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 los nuevos lenguajes web, HTML9 y CSS3, favicon también puede ser uno fisico .png o .jpg. La condición es que en el encabezado del sitio web, antes </cabeza>, la línea debería estar presente:

<enlace rel=”icono de acceso directo” href=”/images/favicon.ico” tipo =”imagen/icono x” />

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

En IOS podemos agregar atajos de páginas web orina Pantalla de inicio-ULiPhone, iPad y iPod Touch.

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

Esto lo hacemos abriendo una página web en el iPhone (navegador de Internet Safari, Chrome, etc.), presionamos el cuadrado con la flecha (el signo de “compartir” en iOS), luego la opción “Agregar a la pantalla de inicio“.

Si el sitio web tiene un favicon configurado para el navegador, pero no está configurado el icono específico para dispositivos iOS, aparecerá en la pantalla un icono formado por un imagina vista previa de la página web.

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

El primer paso escreamos una imagen para el icono, que aparecerá en Pantalla de inicioel dispositivo. Para que el icono web sea compatible en todos los dispositivos y se vea claramente debemos crear la imagen para todas las resoluciones de iPhone y iPad.

Las resoluciones y tamaños estándar de iconos para iPhone, iPad, iPod y Android.

• Modelos clásicos de iPhone/iPod = 57×57
• iPad = 76×76
• iPhone/iPod Retina = 120×120
• Retina del iPad = 152×152
• iPhone 6/6S Plus = 180×180

Manzana actualizar regularmente tamaños de iconos recomendadosURLS aplicaciones y páginas web orina esta pagina.

Para dispositivos Android, los iconos tienen dos tamaños:

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

Después de haber realizado las imágenes, se cargan en el servidor web y en la fuente HTML del sitio web, antes de cerrar. </cabeza>, se añaden las siguientes líneas:

<enlace href=”/icono-toque-apple.png” rel=”icono-toque-de-manzana” /> <enlace href=”/icono-toque-apple-76×76.png” rel=”icono-toque-de-manzana” tamaños =”76×76″ /> <enlace href=”/icono-toque-apple-120×120.png” rel=”icono-toque-de-manzana” tamaños =”120×120″ /> <enlace href=”/icono-toque-apple-152×152.png” rel=”icono-toque-de-manzana” tamaños =”152×152″ /> <enlace href=”/icono-toque-apple-180×180.png” rel=”icono-toque-de-manzana” tamaños =”180×180″ /> <enlace href=”/icono-contrataciones.png” rel=”icono” tamaños =”192×192″ /> <enlace href=”/icono-normal.png” rel=”icono” tamaños =”128×128″ />

Para dispositivos Apple, el nombre de la imagen es .PNG y “rel=” debe contener el prefijo “manzana-“. Para Android, los nombres de los archivos serán “icono-contrataciones.png” y “icono-normal.png” con rel=”icono”.

No es absolutamente necesario crear imágenes para cada resolución por separado. Puede crear una imagen con la resolución más alta y los dispositivos con resolución más baja la identificarán y la configurarán como un ícono.

El icono del acceso directo al sitio web será similar al de cualquier otro aplicaciones para iOS.