Agregar favicons animados a tu sitio

por .

Hace algunos días, Pablo elaboró una guía para mostrar un favicon en diferentes dispositivos desde donde los sitios pueden llegar a ser visitados. Creo que ya hemos hablado en otro momento de la importancia de su utilización ya sea que los usuarios fijen la imagen al sitio, naveguen en una gran cantidad de solapas o utilicen marcadores para acceder rápidamente. Me sucede que Gmail ha cambiado el ícono la última semana y aún tengo inconvenientes para reconocerlo entre mis bookmarks.

Pero no estoy aquí para hablarles de eso sino para recomendarles una forma de hacer que sus favicons sean interactivos o animados con algunas pocas líneas de código. Claro que esto es para la gente que habita en el maravilloso mundo de Chrome, Firefox y Opera, aquellos que aún se encuentran en el lado oscuro (jiji) no podrán visualizar esta genialidad. Bueno, quizás estoy exagerando un poco, pero es realmente divertido.

Favico.js

La idea detrás de Favico.js es permitir interacciones con esa pequeña imagen que nos representa en la solapa del navegador, hasta ahora solo había visto imágenes estáticas y algún que otro gif medio confuso, pero esta información permite agregar secuencias que respondan a interacciones del usuario u otra imagen relacionada que puede estar asociada con una página en particular y accionarse ante un guiño.

Lo más peculiar y novedoso llega cuando nos damos cuenta de que podemos incluir en ese pequeño espacio un video, claro que deberá ser bastante especial para no dejar ciego a nadie (ni sordo) ya que el tamaño es extremadamente reducido, pero es seguramente una novedad y resulta por demás simpático. Con una pequeña advertencia de seguridad, hasta pueden hacer que el favicon se transforme en la cámara web del usuario que nos visita. No tengo idea si se transmitirá o sirve simplemente para que el visitante que decida dar acceso se divierta, pero sin dudas, es una implementación bastante singular.

Entre las opciones interactivas hay diferentes formas de animar el ícono, activarlo sin efectos, o cambiar su color y su forma:

Deslizada

var favicon=new Favico({
    animation:'slide'
});
favicon.badge(1);

Atenuada

var favicon=new Favico({
    animation:'fade'
});
favicon.badge(2);

Salto

var favicon=new Favico({
    animation:'pop'
});
favicon.badge(3);

Atenuada y Salto

var favicon=new Favico({
    animation:'popFade'
});
favicon.badge(1);

Sin animación

var favicon=new Favico({
    animation:'none'
});
favicon.badge(2);

Color

var favicon=new Favico({
    bgColor : '#5CB85C',
    textColor : '#ff0',
});
favicon.badge(3);

Forma

var favicon=new Favico({
    type : 'rectangle',
    animation: 'slide',
});
favicon.badge(1);

Adjuntar contador a una imagen común

var favicon=new Favico({
    type : 'rectangle',
    elementId : 'badgeImage'
});
favicon.badge(2);

Hacer icono una imagen

var favicon=new Favico();
var image=document.getElementById('imageId');
favicon.image(image);

Video HTML5 a ícono

var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');

Webcam a ícono

var favicon=new Favico();
favicon.webcam();
//stop
favicon.webcam('stop');

Pueden descargar el .js desde Favico.js y también probar todas las opciones que les he comentado en el artículo. Presten especial atención a los problemas que tiene la versión, aunque en este caso creo que se puede dejar afuera a los usuarios de exploradores que no lo soporten y seguir utilizando nuestro favicon tradicional. Aún a pesar de estas cuestiones, creo que la aplicación tiene mucho potencial para crear cosas que se salgan de lo común.

Categorizado en: