Cómo crear y configurar un ícono de marcador de iOS listo para retina para un sitio web
Los desarrolladores web y los propietarios de sitios web tienen cuidado: debe establecer un icono de marcador de iOS listo para retina. Los iconos del 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 en el panel de marcadores de Safari para OS X. Sin un conjunto personalizado de Apple-touch de archivos de icono, los usuarios obtendrán una miniatura aburrida y, a menudo, fea de la propia página web, y sin usar un icono listo para retina, el icono de marcador se verá pixelado y generalmente horrible en la nueva pantalla del iPad.
Esto es lo que debe hacer para crear una retina Apple Touch Icon perfecta para cualquier sitio web en unos sencillos pasos.
1) Crea el ícono del sitio iOS listo para retina
Use 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 que se vean hermosos sea tan fácil como un clic o dos. Inserte un sitio web o el logotipo de una empresa y estará listo. Si no tiene nada 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) Guarde como PNG y asigne un nombre al icono de marcador del sitio web de Retina
El icono debe ser PNG y debe nombrarse como uno de dos. Cada nombre de archivo proporciona un aspecto ligeramente diferente al icono que aparece en la pantalla de inicio de los usuarios:
- «apple-touch-icon.png«Agregará la superposición con las burbujas resaltadas al ícono
- «apple-touch-icon-precomposed.png«Mostrará el ícono como se creó originalmente, sin resaltar la superposición
Use la última opción si ha creado su propio resaltado, o si desea que el ícono se vea más suave sin que aparezcan burbujas ubicuas 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. Suele ser la misma ubicación que el archivo de índice del sitio principal. Una vez cargado, confirme que está en la ubicación correcta abriendo un navegador web y accediendo a «http://SITEURL.com/apple-touch-icon.png» y asegurándose de que se esté cargando.
Aquí hay un ejemplo de un icono de marca Retina Ready de 512 × 512 de OSXDaily.com:
Tenga en cuenta que sin la bandera compuesta, el icono de arriba mostrará el globo resaltado. 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, toma un dispositivo iOS (preferiblemente un iPad 3 para confirmar la apariencia de la retina) y abre Safari. Actualiza el sitio web donde cargaste el ícono, luego toca el ícono de flecha y selecciona «Agregar a la pantalla de inicio» como marcador, luego regresa a la pantalla de inicio para confirmar que está allí.
A pesar de tener 512 x 512 píxeles, el ícono de retina caerá bien en iPhones más antiguos y en dispositivos que no sean de retina. Si realmente lo desea, puede usar CSS y HTML para mostrar íconos de diferentes tamaños en diferentes dispositivos, pero realmente no es necesario.
Ahora, si alguien marca su sitio web en un iPad con pantalla retina, se verá mucho mejor en la pantalla de inicio. Eso es realmente todo lo que hay que hacer. Y sí, he escrito sobre el ícono táctil de Apple antes, pero vale la pena mencionar ahora que el iPad 3 requiere íconos y gráficos de resolución significativamente mayor.