iOS Tutoriales

Crea un icono Web personalizado para el iPhone e iPod Touch

Administrador3 septiembre, 20082 Minutos de lectura

Si eres dueño de un iPhone podrás haber notado que puedes separar sitios web y añadirlos a tu página de inicio. Estos se llaman Webclip Icons y pueden ser una vista previa del sitio o un icono. Si quieres añadir uno a tu iPhone hay una manera muy fácil de hacerlo.

Primero crea un icono. Puedes hacer este de cualquier tamaño que quieras, pues va a ser transformado por el iPhone. El mio es uno de 57×57 pixeles en PNG que parece ser el tamaño de los iconos en la pantalla. Cualquier cosa más pequeña y se verá borrosa porque tiene que hacerla más grande.

También puedes usar jpgs. Cualquiera que sea el tamaño, asegúrate que sea cuadrado. No te preocupes por el efecto reflejo o por las orillas redondeadas. El formato que el iPhone usa es PNG, se ven mejor que los jpg pero también son un poco más pesados.

Una vez que tengas tu icono permite que el iPhone lo reconozca de dos maneras. Ya sea que lo guardes como apple-touch-icon.png y lo agregues a la raiz de tu servidor, como en este caso:

http://www.ipodizados.com/apple-touch-icon.png

Alternativamente, si no tienes acceso a la raíz puedes hacer un link en la cabecera de tu HTML.

<head>


     <title>My Site</title>
     <link rel="apple-touch-icon" href="/directory/myicon.png" />

</head>

¿Que hay del efecto y las orillas redondeadas? Bueno, no tienes que preocuparte por eso por que el iPhone lo hace solo. Solo sube los archivos y todo deberá funcionar. Aquí hay un ejemplo de un icono antes de que esté en el iPhone:

Añade el icono a tu página de inicio del iPhone

Si no tienes un iPhone y quieres que el icono esté disponible para los usuarios de iPhone y has seguido las instrucciones no tienes de qué preocuparte. Pero para asegurárte de que está bien, esto es lo que tienes que hacer.

Primero entra a Safari con el iphoney entra a tu sitio. Luego toca el icono de MAS para añadir un favorito, la pantalla de abajo aparecerá. Toca añadir a la página de inicio y confirma, ahora tienes un icono en alguna parte de tu página de inicio.