Cómo crear y configurar un icono de marcador de iOS compatible con Retina para un sitio web

Los desarrolladores web y los propietarios de sitios web prestan atención: debe establecer un ícono de marcador de iOS listo para retina. Los iconos de marcadores se denominan Apple Touch Icon , y estas imágenes personalizadas se convierten en el icono que se muestra en la pantalla de inicio de un usuario cuando marcan un sitio web en un iPad, iPhone o iPod touch en iOS, o en el panel de marcadores de Safari para OS X. Sin un conjunto de archivos Apple-Touch-Icon personalizado, los usuarios obtendrán una miniatura aburrida y, a menudo, fea de la página web en sí, y sin usar un ícono listo para retina, el ícono de marcadores se verá pixelado y generalmente horrible en el nuevo iPad. pantalla.

Esto es lo que debe hacer para crear un Apple Touch Icon perfecto en la retina para cualquier sitio web en unos sencillos pasos.

1) Crea el ícono del sitio web iOS listo para Retina

Utilice una plantilla o diseñe la suya propia. Utilicé el sencillo kit de iconos de retina de bricolaje mencionado en una publicación anterior , es un archivo PSD que hace que diseñar iconos de iOS atractivos sea tan fácil como un clic o dos. Pegue el logotipo de un sitio web o de una empresa y estará listo para comenzar. Si no tiene algo para editar archivos PSD, Photoshop CS6 beta es excelente y se puede descargar y usar gratis hasta que salga la versión final más adelante en el año.

2) Guardar como PNG y nombrar el icono de marcador del sitio web Retina

El icono debe ser PNG y debe tener uno de dos nombres. Cada nombre de archivo ofrece una apariencia ligeramente diferente del icono que se muestra en la pantalla de inicio de un usuario:

  • » Apple-touch-icon.png » agregará la superposición de burbujas resaltadas al ícono
  • » Apple-touch-icon-precomposed.png » mostrará el icono como se creó originalmente, sin la superposición de resaltado

Use la última opción compuesta previamente si creó su propio resaltado, o si desea que el ícono se vea más plano sin la burbuja ubicua que aparece en la mayoría de los íconos predeterminados de Apple.

3) Cargue el icono táctil del marcador del sitio web en el directorio web base

Utilice un cliente SFTP ( OS X incluye FTP en el Finder y CyberDuck o Filezilla son gratuitos) para copiar el archivo apple-touch-icon.png en el directorio web raíz. Esta suele ser la misma ubicación en la que se encuentra el archivo de índice principal del sitio. Una vez cargado, confirme que está en la ubicación correcta abriendo un navegador web y yendo a “http://SITEURL.com/apple-touch-icon.png” y asegurándose de que se cargue.

Aquí hay un ejemplo de un icono de marcador de 512 × 512 listo para retina de OSXDaily.com :

Observe que sin la bandera -precompuesta, el icono de arriba mostrará la burbuja resaltada. Puede ver la diferencia entre los dos comparando el icono real con el que se muestra en las capturas de pantalla como marcador.

4) Utilice un dispositivo iOS y marque el sitio como favorito

Esta es la parte más fácil, tome un dispositivo iOS (preferiblemente un iPad 3 para confirmar el aspecto de la retina) y abra Safari. Actualiza el sitio web en el que cargaste el ícono y luego toca el ícono de flecha y selecciona «Agregar a la pantalla de inicio», asigna un nombre al marcador, luego regresa a la pantalla de inicio para confirmar que está allí.

A pesar de tener 512 x 512 píxeles, el icono de la retina se reducirá bien en los iPhones más antiguos y en los dispositivos sin retina. Si realmente lo desea, puede usar CSS y HTML para mostrar iconos de diferentes tamaños en diferentes dispositivos, pero en realidad no es necesario.

Ahora, si alguien marca su sitio web en un iPad con pantalla Retina, se verá mucho mejor en su pantalla de inicio. Eso es realmente todo lo que hay que hacer. Y sí, ya hemos escrito sobre el ícono táctil de Apple , pero merece otra mención ahora que el iPad 3 exige íconos y gráficos de resolución significativamente mayor.

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario