html - code - Cómo animar un favicon?

favicon svg

Question

Cómo animar un favicon así?

Parece que solo funciona en Firefox.

Answer 1

Firefox

Firefox admite favicons animados. Simplemente agregue un enlace al GIF en la etiqueta <link rel="icon"> :

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

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

Otros navegadores

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

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

_{libgif.js para extraer marcos GIF.}

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

Consulte también la biblioteca favico.js .

Ver también

• ¿Cómo agregar un ícono de pestaña del navegador (favicon) para un sitio web?
• Cambiando el favicon del sitio web dinámicamente

Answer 2

Cambia el nombre de tu gif animado a favicon.gif y ponlo donde tienes index.html (o index.php ... o similar) (public_html o su subdirectorio si tienes más sitios) en tu servidor, automáticamente funcionará.

Answer 3

Casi seguro que no es lo que está buscando, pero algunas personas han llegado al extremo de escribir programáticamente en el favicon en JavaScript del lado del cliente. La siguiente url muestra el viejo videojuego ''Defender'' jugando en el favicon:

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

Esto funciona en Firefox, Opera y Safari, pero no en al menos las versiones anteriores 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 es una lectura bastante interesante.

Answer 4

Hay repos en GitHub demostrando cómo hacer esto.

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

Esencialmente dibujan en el lienzo y luego hacen canvas.toDataURL(''image/png'') y luego configuran el <link> href en esa url de datos.

Answer 5

Si bien actualmente solo es compatible con Firefox, es de esperar que otros navegadores lo admitan en el futuro. Para lograr el efecto, debe cargar el gif en su servidor y luego agregar la siguiente línea a la sección principal de su página:

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

Eche un vistazo a AnimatedFavIcon.com para obtener ayuda y recursos adicionales.