Técnica electrónica > Móvil > Consejos y trucos > IOS > Cómo hacer y establecer un icono Retina-Ready iOS favorito para una página web

Cómo hacer y establecer un icono Retina-Ready iOS favorito para una página web




Los desarrolladores web y propietarios de sitios web presten atención: es necesario configurar un icono de marcador iOS retina listo. Los iconos de marcador se llaman un toque icono de la manzana, y estas imágenes personalizadas se convierten en el icono que se muestra en una pantalla de usuarios en casa cuando un marcador a una página web en un iPad, iPhone o iPod touch en IOS, o el panel de marcadores de Safari para OS X. sin una manzana-touch-icon set del archivo, los usuarios recibirán una miniatura aburrido y feo a menudo de la propia página web, y sin necesidad de utilizar un icono de la retina-lista, el icono de marcadores se verá pixelada y generalmente horrible en el nuevo iPad pantalla.

Esto es lo que hay que hacer para crear una retina perfecta tacto de Apple icono para cualquier sitio web en unos pocos y sencillos pasos.


1) Crear la Retina-Ready iOS Sitio web Icono

Utilice una plantilla o diseñar su propio. He utilizado el kit de bricolaje fácil icono de la retina se mencionó en un post anterior, se trata de un archivo PSD que hace que el diseño de los iconos de iOS agradables que buscan tan fácil como un clic o dos. Pegar en un sitio web o logotipo de la empresa y que está bastante bien para ir. Si usted no tiene algo para editar archivos PSD, Photoshop CS6 beta es excelente y para descargar y utilizar hasta que la versión final salga a finales de año libre.

página 2) Guardar como PNG y nombre de la página web Icono de marcador Retina

El icono debe ser un PNG, y debe ser nombrada una de dos cosas. Cada nombre de archivo ofrece un aspecto ligeramente diferente del icono que aparece en una pantalla de usuarios Cerrar Buscar
"manzana-touch-icon.png" agregará la superposición de burbujas resaltado en el icono

"manzana-touch-icon-precomposed.png" se mostrará el icono como se creó originalmente, sin la superposición destacado



Utilice la última opción -precomposed si ha creado su propia culminante, o si desea que el icono que aparezca más plana y sin burbujas ubicua que aparece en la mayoría de los iconos por defecto de Apple. página 3) Sube el Sitio Web Favorito Toque el icono para el Directorio Web Base

Utilice un cliente SFTP (FTP OS X incluye en el Finder, y Cyberduck o Filezilla son gratis) para copiar el toque-icono de la manzana .png archivo en el directorio raíz del servidor web. Esta suele ser la misma ubicación que el archivo de índice principal de los sitios se encuentra. Una vez cargados, confirme que se encuentra en la posición adecuada mediante la apertura de un navegador web y vaya a "http://SITEURL.com/apple-touch-icon.png" y asegurarse de que se carga.

A continuación se muestra un ejemplo de un icono de marcador retina listos 512 × 512 de OSXDaily.com:



Tenga en cuenta que sin la bandera -precomposed, el icono anterior mostrará la burbuja punto culminante. Se puede ver la diferencia entre los dos comparando el icono real al que se muestra en las capturas de pantalla como el marcador. página 4) Utilice un dispositivo iOS y marcar el sitio

Esta es la parte más fácil, agarra un dispositivo iOS (preferiblemente un iPad 3 para confirmar el aspecto retina) y abierto Safari. Volver a cargar la página web que ha subido el icono para, a continuación, toque en el icono de flecha y seleccionar "Añadir a pantalla de inicio" nombrar el marcador, a continuación, volver a la pantalla de inicio para confirmar que está ahí.



A pesar de ser de 512 x 512 píxeles, el icono de la retina se ralentizará muy bien en los más antiguos iPhones y dispositivos que no son de la retina. Si realmente desea, puede utilizar CSS y HTML para mostrar iconos diferentes tamaños para diferentes dispositivos, pero no es realmente necesario.

Ahora bien, si alguien de favoritos El sitio web en un iPad con una pantalla de la retina, que se verá mucho mejor en su pantalla de inicio. Eso es realmente todo lo que hay que hacer. Y sí, hemos escrito sobre el icono táctil de Apple antes, pero merece otra mención ahora que el iPad 3 demandas significativamente más alta resolución y los iconos gráficos.