Contenido

Diviertete con el favicon de tu web y Javascript

1 Feb

+ 12

Los Favicon, son las imagenes que acompañan al nombre de tu página en las pestañas de Firefox, Safari, Opera,… estos ayudan a conocer una página de un solo golpe de vista, ya que como dicen, «Una imagen vale más que mil palabras». 

El código HTML

Ponerlo en nuestra página web es algo tan sencillo como introducir un tag HTML en nuestro <head />. Tenemos 2 casos:

a) <link rel="icon" href="/favicon.ico" type="image/x-icon" />
b) <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

En la mayoría de navegadores basta con usar la opción (a) ya que el rel debe indicar que se trata de un icono, aunque navegadores como Internet Explorer tienen problemas con este rel. Para evitar dicho problema se suele usar la opción (b), que producirá que los navegadores más estandares omitan la palabra «shotcut» y lo traten como si una «icon» se tratara.

Ruta

En el href, indicaremos donde se encuentra la imagen que mostraremos. Podemos usar rutas absolutas o relativas, lo que nos permite un gran grado de personalización en este aspecto, pudiendo tenerlo en un servidor externo o tener varios por servidor.

Interesante: Si llamamos al fichero favicon.ico y lo alojamos en la raiz de nuestro servidor, esta imagen será usada en cualquier sitio del sitio web.

Imagenes

Usaremos una imagen que puede ser de tipo:

  • ICO
  • GIF
  • PNG

Dependiendo del tipo de imagen que usemos deberemos cambiar el type de nuestro tag para informar sobre el tipo de imagen que hemos optado usar y que el navegador va a cargar.

ICO) <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon" /> //M$
ICO) <link rel="icon" href="/favicon.ico" type="image/x-icon" /> //Estandar
GIF) <link rel="icon" href="/favicon.gif" type="image/gif" />
PNG) <link rel="icon" href="/favicon.png" type="image/png" />

Tamaños y Colores

Dependiendo del tipo de imagen que deseemos usar, tendremos que tener en cuenta las posibilidades entre tamaño y colores que podemos utilizar.

ICO

  • Tamaño: 16×16 / 32×32 / 64×64 / 128×128
  • Colores: 16,256,16 millones

GIF

  • Tamaño: 16×16
  • Colores: 256

PNG

  • Tamaño: 16×16
  • Colores: Desde 256 a 24-bit.

Jugando con javascript

Dynamic Favicon Library, es una librería desarrollada en Javascript que nos permite interactuar con nuestro favicon, cambiandolo o animandolo para ofrecer un aspecto diferente e innovador.

favicon.change("/icon/active.ico", "new title"); //Cambiamos el favicon con título
favicon.change("/icon/active.ico"); //Cambiamos el favicon
favicon.change(null, "new title"); // Eliminamos le favicon
favicon.animate(["icon1.ico", "icon2.ico", ...]); //Animamos el favicon con un array de imagenes.
favicon.animate(["icon1.ico", "icon2.ico", ...], {delay: 500} ); // Definimos el tiempo espera antes de cambiar las imagenes.
favicon.scrollTitle("new title"); // Hacemos que el título de mueva, estilo marquesina.
favicon.scrollTitle("new title", { delay: 200, gap: "------"} ) // Indicamos el tiempo de espera
favicon.unscroll(); //Eliminamos efectos de scroll
favicon.unanimate(); //Eliminamos efectos de animación.

[Demo][Descargar]

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.