Share
Con más usuarios de web móviles que nunca, es importante mantener su marca fuerte. Vayamos un paso más allá del favicon estándar y ayudemos a que su sitio web destaque mediante la creación de iconos para usar en las pantallas de inicio de iOS y Android.
* Impresionante icono de waffle por Eddie Lobanovskiy
Antes de que siquiera pensemos en las dimensiones de nuestros iconos, hay algunas cosas importantes que debe tener en cuenta al diseñarlas (específicamente en lo que respecta a los dispositivos Apple).
También vale la pena tener en cuenta al diseñar su icono que es posible anular estos comportamientos de iOS predeterminados. Veremos cómo se hace esto en breve..
Cada dispositivo Apple tiene un tamaño y resolución de pantalla diferente. Eso significa que para obtener los mejores resultados, necesita un icono de tamaño diferente para cada dispositivo. No te preocupes por Android: cualquier icono de tamaño se reduce automáticamente.
Aquí tiene todo lo que necesita saber para cada dispositivo Apple:
iOS determina qué icono usar dependiendo de su tamaño. El uso de iconos más grandes para pantallas de mayor resolución nos permite aumentar la calidad de nuestras imágenes. Eche un vistazo a la atención adicional a los detalles en estos ejemplos:
Como se mencionó anteriormente, iOS agrega automáticamente efectos como esquinas redondeadas, sombras y el clásico "brillo reflectante" de Apple. Si está diseñando íconos para aprovechar esto, simplemente haga que su ícono quede cuadrado y deje los efectos en iOS. Si prefiere hacer sus propias esquinas redondeadas, tenga en cuenta que puede parecer desordenado e inconsistente..
Para anular estos valores predeterminados de iOS, use -precompuesto dentro de rel Atribuir cuando se enlaza a su icono. Así es como podría aparecer:
Notarás arriba que demostramos un ícono con la -precompuesto palabra clave al final de su nombre de archivo. Esto es solo como un recordatorio para nosotros mismos..
No es necesario nombrar sus imágenes de esta manera, pero es útil para recordar las circunstancias para las cuales diseñó el icono. Si planea hacer todo lo posible y crear íconos para tantos dispositivos como sea posible, entonces es conveniente nombrarlos en consecuencia. Por ejemplo:
Agregar los íconos a su sitio es muy simple: todo lo que necesita es una línea de código para cada tamaño de ícono. Supongamos que ha creado iconos con los tamaños 57x57px, 72x72px y 114x114px. Es importante definir el tamaño del ícono correctamente para que puedan usarse para el dispositivo correcto, independientemente del hecho de que todos se encuentren bajo la etiqueta "apple-touch-icon".
No se olvide, si desea anular la configuración de pantalla predeterminada de iOS, necesita la -precompuesto palabra clave después de "apple-touch-icon" en el rel campo de atributo.
Y eso es todo lo que hay que hacer! Ahora tiene un nuevo conjunto de iconos nítidos listos para reforzar su marca en el creciente mercado de la web móvil. Si alguien agrega su sitio a la pantalla de inicio de iOS, en lugar de una captura de pantalla, verá su icono. Con muchos usuarios de iOS que guardan sitios web para su posterior lectura, es importante tener un buen ícono para que su sitio se destaque del resto.
Si está pensando en cómo se aplica esto a los usuarios de Android, no se preocupe.
Android también soporta el 'Apple-Touch-Icon-precomposed'atributo rel rel, por lo que no es necesario agregar ningún código de reserva. El sistema operativo escalará el icono más apropiado al tamaño correcto, por lo que no necesita crear iconos de tamaño específico para dispositivos Android. Incluso si no usa ninguna de las opciones de Apple-Touch-Icon, el sistema operativo Android usará la imagen de marcador estándar (favicon) de su sitio para el icono de la pantalla de inicio..
No todos los usuarios de dispositivos móviles son conscientes de que pueden agregar marcadores de página web a su pantalla de inicio, por lo que puede considerar pedirles que lo hagan. Hay algunos fragmentos de JavaScript para ayudarlo a hacer esto, como el script Agregar a la pantalla de inicio de Matteo Spinelli.
Sin embargo, como siempre, vale la pena considerar el impacto en el rendimiento de arrastrar otro archivo .js.
Espero que este rápido consejo te haya inspirado para crear tus propios íconos para iOS. Pueden resultar muy útiles para sus usuarios, y los iconos personalizados servirán a su marca mucho mejor que una captura de pantalla ilegible.
Accentsconagua