Cómo animar un favicon?

Question

¿Cómo animar un favicon como ese?

parece que funciona sólo en Firefox.

Answer 1

Si bien actualmente solo es compatible con Firefox, es de esperar que otros navegadores lo admitan en el futuro. Para conseguir el efecto, es necesario cargar el GIF a su servidor y luego agregue la línea siguiente para head sección 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

Casi seguro que no es lo que está buscando, pero algunas personas han llegado al punto de escribir programáticamente en el favicon en JavaScript del lado del cliente. 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 lo que el último IE podría ser capaz de hacer.

Hacer una 'fuente de vista' en esta página hace una lectura bastante interesante.

Answer 3

Cambie el nombre de su gif animado a favicon.gif y colóquelo donde tiene su index.html (o index.php ... o similar) (public_html o su subdirectorio si tiene más sitios) en su servidor, automáticamente funcionará .

Answer 4

Firefox

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

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

También puede utilizar el archivo ICO animado. En este caso, los navegadores que no admiten favicones animados solo mostrarán el primer fotograma.

Otros navegadores

En otros navegadores puede animar un favicon uso de JavaScript. Solo tiene que extraer cuadros individuales del GIF y cambiar <link rel="favicon"> src cada vez que cambie el marco GIF. Ver este código, por ejemplo, (JS Fiddle demo):

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) 
} 

_{que utilizan libgif.js a extraer los marcos del GIF.}

Desafortunadamente, la animación no es muy suave en Chrome. En Firefox funciona muy bien, pero Firefox ya admite favicons GIF.

Echa un vistazo también a la biblioteca favico.js.

Ver también

• How to add a browser tab icon (favicon) for a website?
• Changing website favicon dynamically