Configure «apple-touch-icon.png» para personalizar un sitio web de marcadores de iPhone FavIcon
Si tiene su propio sitio web o está desarrollando uno para otra persona, debe personalizar el icono de marcador guardado que aparece en la pantalla de inicio de iOS de los usuarios. En la captura de pantalla anterior, verá el favicon personalizado de OSXDaily colocado en la pantalla de un iPhone.
Configurar el ícono de Apple Touch es una buena idea, porque por defecto iOS guardará solo una pequeña miniatura del sitio. Las miniaturas pequeñas suelen ser difíciles de identificar y, por lo general, no se ven tan bien, así que establezcamos nuestra propia imagen de favicon.
Cómo personalizar y configurar un icono de Apple Touch para un sitio web
- Cree el icono, asegúrese de que sea un cuadrado, el de OSXDaily.com tiene 512 × 512 píxeles, pero puede elegir otros tamaños cuadrados si realmente lo desea: la nota más alta es adecuada para pantallas retina
- Guarde el icono de la pantalla de inicio como un archivo PNG y etiquételo: apple-touch-icon.png
- Lanza apple-touch-icon.png en el directorio raíz del servidor web para que se pueda acceder a él en domain.com/apple-touch-icon.png
- Prueba el ícono de marcador de la pantalla de inicio del sitio web visitando el sitio de Safari en iOS y luego tocando «Agregar a la pantalla de inicio».
- Eche un vistazo a la pantalla de inicio de su dispositivo iOS y verá el marcador guardado allí con el nuevo icono personalizado, como la captura de pantalla anterior.
Siempre que el archivo tenga el nombre correcto en el directorio raíz de los servidores web, Mobile Safari sabrá qué hacer con él, por lo que no se necesitan más ajustes para mostrar el favicon específico de iOS.
Como referencia, aquí está la imagen personalizada «apple-touch-icon.png» que usamos para OSXDaily.com, este ejemplo del icono de marcador se crea y se dimensiona en consecuencia para las pantallas de retina (obtenga más información sobre cómo crear el icono de marcador de retina aquí ):
Notará que el archivo de icono real no tiene la refracción de la luz guardada en el icono, iOS lo maneja por sí solo. Puede usar cualquier imagen que desee, pero le recomiendo crear una que capture la interfaz familiar de los iconos de iOS existentes.
Obviamente, esto no es lo mismo que tener una aplicación iOS dedicada, pero una experiencia de usuario móvil decente en la web es una buena idea y evita lo que puede ser el alto precio de desarrollar una aplicación iOS.
Y bueno, si estás preocupado por esas cosas, probablemente estés usando Photoshop para al menos diseñar los íconos, ¿verdad? Entonces, aquí hay algunos consejos para acelerar Photoshop mientras lo hace.