Cómo animar un favicon?

Question

¿Cómo animar un favicon así?

Parece que funciona sólo en Firefox.

Answer 1

A pesar de que actualmente sólo está soportado por los navegadores Firefox otros se espera que apoyarlo en el futuro. Para conseguir el efecto, es necesario cargar el GIF a su servidor y luego añadir la siguiente línea a la sección head de su página:

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Tome un vistazo a AnimatedFavIcon.com en busca de ayuda y recursos adicionales.

Answer 2

Es casi seguro que no es lo que está buscando, pero algunas personas han ido tan lejos como para escribir mediante programación para el favicon en el lado del cliente JavaScript. La siguiente URL muestra el viejo juego de video juego 'Defender' en el favicon:

http://www.p01.org/defender_of_the_favicon/

Esto funciona en Firefox, Opera y Safari, pero no en las versiones al menos antiguas de IE. No estoy seguro de cuál es la última IE podría ser capaz de hacer.

Si lo hace 'ver código fuente' en esta página lo convierte en toda una lectura interesante.

Answer 3

Firefox

Firefox soporta favicons animados. Sólo tiene que añadir un enlace al GIF en la etiqueta <link rel="icon">:

<link rel="icon" href="/favicon.gif">

También puede usar el archivo ICO animado. En este caso los navegadores que no soportan favicons animados mostrará sólo el primer fotograma.

Otros navegadores

En otros navegadores se pueden animar un favicon uso de JavaScript. Sólo hay que extraer fotogramas individuales del GIF y cambiar <link rel="favicon"> src cada vez que cambia el marco GIF. Ver este código, por ejemplo, ( JS violín demostración ):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

_{utilicé libgif.js para extraer los marcos GIF.}

Por desgracia, la animación no es muy suave en Chrome. En Firefox funciona muy bien, pero ya es compatible con Firefox faviconos GIF.

favico.js biblioteca.

Ver también

• Cómo agregar un icono de pestaña del navegador (favicon) para un sitio web?
• Cambio de página web dinámica favicon

Answer 4

Hay repos sobre GitHub que demuestran cómo hacerlo esto.

http://lab.ejci.net/favico.js/example- sencillo /

En esencia dibujan sobre el lienzo y luego hacer canvas.toDataURL('image/png') y luego establecer el href <link> a que los datos-url.

Answer 5

He creado una biblioteca para animar favicon , por defecto es la animación del cargador (se genera por la lona ), pero también el apoyo de la animación gIF para el navegador que no admite gIF fuera de la caja (de la versión 0.3.0).

API es simple

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

Versión 0.4.0 tendrá la función de devolución de llamada que va a generar un marco algo como:

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

y el usuario será capaz de sacar solo cuadro

Nota: Las cosas para considerar si se desea implementar algo como esto:

• se anime cuando pestaña no está activo trabajador de uso en la web,
• No utilice requestAnimationFrame, debido a que se detenga la ejecución en MacOSX / Chrome trabajador incluso en web.

Answer 6

Para animar el favicon para casi todos los navegadores, los siguientes trabajaron para mí:

1. Descargar una imagen de cada fotograma del gif.

2. Enlace la primera imagen como un icono con un id:

   <link rel="icon" type="image/png" href="/image1.png" id="icon"/>  
   

3. Crea una función para bucle, y utilizar setTimeout() para cada imagen. Los tiempos son variables y se pueden configurar para obstante rápido desea que la animación. He aquí un ejemplo:

   function iconChange() {
   setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
   setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
   setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
   }
   

4. Crea un bucle cuando se carga la ventana:

   window.onload = function() {
   setInterval(function() {
   iconChange();
   }, 250);
   };
   

Este método solo ayuda a asegurar que más navegadores pueden ver la animación, ya que otros métodos sólo funcionan en algunos navegadores y versiones de navegadores.