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 inicio-ul idevice-ului. Pentru ca web iconul sa fie compatibila pe toate device-urile si sa se vada clar, trebuie sa creem imaginea pentru toate rezolutiile de iPhone si iPad.
Rezolutiile si marimile standard ale iconurilor pentru iPhone, iPad, iPod si Android
- Modelele clasice de iPhone / iPod = 57×57
- iPad = 76×76
- iPhone / iPod Retina = 120×120
- iPad Retina = 152×152
- iPhone 6/6S Plus = 180×180
Manzana actualizeaza regulat dimensiunile recomandate pentru iconURLS aplicaciones y páginas web orina acesta pagina.
Pentru device-urile Android, icon-urile sunt de doua dimensiuni:
- Android clasic = 128×128
- Android cu rezolutie mare (hi-res) = 192×192
Dupa ce avem facute imaginile, se urca pe web server, iar in sursa HTML a website-ului, inainte de inchiderea </cabeza>, se adauga liniile urmatoare:
<link href=”/apple-touch-icon.png” rel=”icono-toque-de-manzana” /> <link href=”/icono-toque-apple-76×76.png” rel=”icono-toque-de-manzana” tamaños =”76×76″ /> <link href=”/icono-toque-apple-120×120.png” rel=”icono-toque-de-manzana” tamaños =”120×120″ /> <link href=”/icono-toque-apple-152×152.png” rel=”icono-toque-de-manzana” tamaños =”152×152″ /> <link href=”/icono-toque-apple-180×180.png” rel=”icono-toque-de-manzana” tamaños =”180×180″ /> <link href=”/icono-contrataciones.png” rel=”icono” tamaños =”192×192″ /> <link 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.
