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.
12 comentarios, 0 referencias
+
#