Favicon en Web, mobiles y Tablets

En esta oportunidad les hablare de la importancia del favicon (favorit Icon), y de su correcta insercion en páginas Web, dispositivos mobiles y Tablets (tanto android y iOS).

Sin ingresar en lo obsevivo, detallo a continuacion, lo que yo considero, lo básico y lo neceasrio para lograrlo:

HTML

La forma más básica de mostrar un favicon en la mayoria de los navegadores Web, es simplemente colocando un archivo con la extencion .ico en el directorio raiz del servidor.

Ahora, si lo que queremos es asegurarnos la presencia de nuestro favicon, podemos vincularlo en la cabecera de nuestro codigo:

favicon_basic

Referencia: http://es.wikipedia.org/wiki/Favicon

Para iOS 2.0+, Android 2.1

Para los usuarios de dispositivos moviles con versiones de iOS 2 o superior y Android 2.1 o superior podemos utilizar:

favicon_ios

Tanto en iOS y Android el nombre del archivo que debemos utilizar es favicon-152.png, este archivo se autoescala para los distintos dispositivos.

Para dispositivos Apple

Para lograr mostrar un favicon en distinto tamaño, opción muy útil en dispositivos de la Apple debemos utilizar:

favicon_ios2

Formato de imagen y dimenciones:

Para la mayoría de los navegadores alcanza con utilizar una imagen de 16×16 o 32×32 pixeles. En cambio para dispositivos iOS o Android podremos utilizar archivos más complejos con un tamaño de 152x152px.

Tips

Estos tips serviran para cuando no se visualizen los cambios (algo que muy habitualmente suede)

  • Borrar la cache del navegador.
  • Abrir y cerrar (en general funciona con Internet Explorer).
  • Abrir más pestañas si la actual no se refresca.
  • Agregar un parámetro al archivo para forzar la actualización (lo mismo que se suele hacer con archivos CSS)

favicon_parametros

Favicon con animación, imagen y video

Favicon.js, una libreria en JavaScript, está un paso mas adelante, ya que permite diferentes tipos de transiciones y animaciones, compatible con video html5, y live stream de la webcam. Desafortunadamente, no tiene soporte para Safari ni Internet Explorer (por el momento).

favicon_js

Para mas información:

Como una nota final , cabe hacer notar que no es valido favicon.png en la especificación HTML5 de W3C, solo favicon.ico http://www.w3.org/TR/html5/links.html#rel-icon

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s