Post Actualizado en julio 25, 2013
Como agregar apple icon y favicon en tu sitio web
Muchas veces por ansias, descuido o algunas otras razones, estamos impacientes, tratando de terminar nuestros nuevo diseño para implementarlo en el sitio web al que esta destinado, ya durante el proceso tomamos en cuenta como se vería en móviles, que dimensiones tendría, incluso si todos los botones tendrían las esquinas redondeadas o en punta, pero […]
Muchas veces por ansias, descuido o algunas otras razones, estamos impacientes, tratando de terminar nuestros nuevo diseño para implementarlo en el sitio web al que esta destinado, ya durante el proceso tomamos en cuenta como se vería en móviles, que dimensiones tendría, incluso si todos los botones tendrían las esquinas redondeadas o en punta, pero que pasa con esos elementos que con el tiempo van saliendo y nos hacen poner mas recursos para arreglarlos, cuando desde un principio pudimos haberlos contemplado.
Hoy en día hay varias cosas que debemos tener en cuenta al diseñar un sitio web, desde los estándares, pasando por la experiencia del usuario, hasta si vamos a utilizar imágenes o en su mayor parte con código, pero hay elementos que siempre son interesantes e importantes y que pocas veces pensamos en ellos, por eso te compartimos una lista para que no se te olvide ningún detalle al crear un nuevo diseño.
Favicon
El favicon es una pequeña imagen representativa de un sitio web y que funciona básicamente para ilustrar el sitio. Este elemento es dejado a un lado constantemente porque no aporta mucho al sitio, aunque como herramienta para identificar a la página web, es interesante siempre tenerla.
La manera de integrarlo a tu sitio web es la siguiente:
Tener el archivo en .ico ya en tu computadora, si no lo tienes aún, hay cientos de paginas que permiten subir imágenes en diferentes formatos y que te convierten en ico la misma imagen. Ya que tienes el archivo, debes integrar dentro de tu sección de <Head> la siguiente línea de código:
<link rel=”shortcut icon” href=”la ruta donde se encuentra tu icono” />
Agregar un icono de tu sitio web para dispositivos con IOS
Los usuarios de un sistema con IOS, ya sea iPod, iPhone o iPad, sabrán de lo que estoy hablando, y estoy seguro que muchos otros que no lo son, también. Una de las ventajas que tiene el visitar sitios web, es que los puedes agregar al home como una aplicación, estoy te permite tener una ruta corta para acceder a estos sitios.
Normalmente cuando accedes a un sitio, y lo anclas a tu pagina de inicio, el sistema toma un screenshot de la pagina y lo pone como caratula del nuevo atajo. Lo que Apple hizo fue dar la posibilidad a los propietarios de sitios web de agregar la imagen que estos quieran para que se muestre a los usuarios que anclan sitios en su home.
Para esto, lo que necesitas es tener un icono de 72×72 pixeles, ya sea en JPG y PNG (yo recomiendo PNG) y llamarlo apple-touch-icon
Ya que tengamos nuestra imagen, lo siguiente es agregar una línea de código como lo hicimos en el favicon:
<link reel=”apple-touch-icon” href=”la ruta que tiene el archivo”>
Cuando hagamos esto, con y sin el característico brillo que le agrega el sistema a todas las aplicaciones, en caso de que no queramos el brillo, lo único que debemos hacer es renombrar la imagen a:
apple-touch-icon-precomposed
Con estos dos consejos estamos seguros que harás felices a muchos de tus usuarios y le darás un toque más interesante a tu sitio web, ya sabes que los detalles siempre son bienvenidos.