Los desarrolladores web y los propietarios de sitios web prestan atención: debe configurar un ícono de marcador de iOS listo para retina. Los iconos de marcador se denominan Apple Touch Icon, y estas imágenes personalizadas se convierten en el icono que se muestra en la pantalla de inicio de los usuarios cuando marcan un sitio web en un iPad, iPhone o iPod touch en iOS, o el panel de marcadores de Safari para OS X.Sin un conjunto de archivos de íconos táctiles de Apple personalizados, 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 la nueva pantalla del iPad.

Esto es lo que debe hacer para crear un ícono Apple Touch perfecto para retina para cualquier sitio web en unos pocos y sencillos pasos.

1) Cree el icono del sitio web iOS listo para retina

Utilice una plantilla o diseñe la suya propia. Utilicé el sencillo kit de íconos de retina DIY mencionado en una publicación anterior, es un archivo PSD que hace que diseñar íconos de iOS atractivos sea tan fácil como hacer un clic o dos. Pegue un sitio web o el logotipo de la 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 ícono del marcador del sitio web de Retina

El icono debe ser PNG y debe tener el nombre de una de dos cosas. 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 burbuja res altada al icono
• “apple-touch-icon-precomposed.png” mostrará el ícono tal como se creó originalmente, sin la superposición res altada

Utilice la última opción precompuesta si creó su propio res altado o si desea que el ícono aparezca más plano sin la omnipresente burbuja que aparece en la mayoría de los íconos predeterminados de Apple.

3) Cargue el icono táctil de marcador de 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 adecuada 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 ícono de marcador listo para retina de 512×512 de OSXDaily.com:

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

4) Usar un dispositivo iOS y marcar el sitio como favorito

Esta es la parte más fácil, tome un dispositivo iOS (preferiblemente un iPad 3 para confirmar el aspecto retina) y abra Safari.Actualice el sitio web en el que cargó el ícono y luego toque el ícono de la flecha y seleccione "Agregar a la pantalla de inicio". Asigne un nombre al marcador y luego regrese a la pantalla de inicio para confirmar que está allí.

A pesar de tener 512 x 512 píxeles, el icono de retina se reducirá correctamente en iPhones más antiguos y dispositivos sin retina. Si realmente lo desea, puede usar CSS y HTML para mostrar íconos 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 icono táctil de Apple, pero merece otra mención ahora que el iPad 3 exige iconos y gráficos con una resolución significativamente mayor.