Configure “apple-touch-icon.png” para personalizar un sitio web iPhone Bookmark FavIcon

Tabla de contenido:

Anonim

Si tiene un sitio web propio 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 sentado en la pantalla de un iPhone.

Configurar el icono táctil de Apple es una buena idea porque, de forma predeterminada, iOS solo guardará una pequeña miniatura del sitio. Las miniaturas pequeñas a menudo son difíciles de identificar y, por lo general, no se ven tan bien, así que configuremos su propia imagen de favicon en su lugar.

Cómo personalizar y configurar un ícono Apple Touch para un sitio web

  • Cree el ícono, asegúrese de que sea un cuadrado, el que está aquí en OSXDaily.com tiene 512 × 512 píxeles, pero puede elegir otros tamaños de cuadrados si realmente lo desea; tenga en cuenta que más grande es apropiado para pantallas retina
  • Guarde el ícono de la pantalla de inicio como un archivo PNG y etiquételo: apple-touch-icon.png
  • Coloque apple-touch-icon.png en el directorio raíz del servidor web, para poder acceder a él en domain.com/apple-touch-icon.png
  • Pruebe el icono de marcador de la pantalla de inicio de su sitio web visitando el sitio desde Safari en iOS y luego tocando "Agregar a la pantalla de inicio"
  • Mire la pantalla de inicio del dispositivo iOS y verá el marcador guardado allí con su nuevo ícono personalizado, como la captura de pantalla anterior

Siempre que el archivo tenga el nombre correcto y se encuentre en el directorio raíz del servidor web, Mobile Safari sabrá qué hacer con él, por lo que no es necesario realizar más ajustes para que aparezca el favicon específico de iOS.

Como referencia, aquí está nuestra imagen personalizada 'apple-touch-icon.png' que usamos para OSXDaily.com, este icono de marcador de ejemplo se crea y tiene el tamaño apropiado para pantallas retina ():

Notarás que el archivo del ícono real no tiene la refracción de la luz guardada en el ícono, iOS maneja esto por sí solo. Puede usar cualquier imagen que desee, pero le recomiendo que cree una que capture la interfaz de usuario 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 desde la web es una buena idea y evita lo que puede ser el alto precio de desarrollar una aplicación iOS.

Y oye, si te preocupan cosas como esta, probablemente uses Photoshop para al menos diseñar los íconos, ¿verdad? Así que echa un vistazo a algunos mientras estás en ello.

Configure “apple-touch-icon.png” para personalizar un sitio web iPhone Bookmark FavIcon