¿Cómo usar la animación en la imagen de favicon?

Posted on by Rudeus Greyrat

Un favicon es un ícono especial que aparece en la esquina superior izquierda cerca de la barra de direcciones web. El tipo de archivo puede ser cualquier imagen jpg, png, gif o icono (.ico). El nombre de favicon predeterminado es favicon.ico . Los favicons también se conocen comúnmente como icono de acceso directo, icono de marcador o icono de sitio web. Proporcionan comodidad a los usuarios para localizar su página web. Los favicons se incluyen para un aspecto profesional de la marca con un logotipo específico que mantiene una uniformidad a través de todas las páginas del sitio web. Los íconos ayudan al sitio web en la marca en línea. Un favicon animado se crea a partir de una imagen animada. Se establece a través de la etiqueta de enlace . Es básicamente un conjunto de imágenes que se ejecutan una tras otra dentro de un marco de tiempo específico.

Sintaxis:

  • Para agregar gif como favicon: 
    <link rel="icon" href="geeksforgeeks.org/favicon.gif" type="image/gif" />
  • Para agregar una imagen normal como favicon: 
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

Nota: Las imágenes animadas de tipo GIF funcionarán en el navegador Firefox. El .ico es el formato estándar que funciona bien en todos los navegadores, pero muchos sitios web prefieren imágenes de tipo PNG .

Enfoque: en los siguientes códigos de ejemplo, el enfoque adoptado es la visualización de una animación progresiva con la ayuda de lienzo HTML, javascript y geometría matemática. Se agrega un botón Animar Favicon en la página HTML, que ayuda a iniciar el efecto de animación en el evento de clic. Una vez que el dibujo está hecho en el lienzo, se convierte en una imagen PNG antes de asignarlo como favicon.

  • Ejemplo 1: el siguiente código de ejemplo mostrará la implementación de la animación circular en la imagen de favicon.

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
      
        <meta charset="UTF-8">
        <title>Circular animation on favicon</title>
        <link rel="shortcut icon" href="gfgFavicon.png" width=32px>
        <script language="javascript">
            onload = function() {
                canvas = document.querySelector('#canvasId'),
                    context = canvas.getContext('2d');
                if (!!context) {
      
                    // The start position for drawing circle
                    C3qpi = 1.5 * Math.PI,
                        tc = pct = 0,
                        btn = document.querySelector('#animateBtn'),
                        faviconLnk = document.querySelector('link[rel*="icon"]');
                    context.lineWidth = 3;
                    context.strokeStyle = 'green';
      
                    // On page refresh, enable the button 
                    if (btn.disabled) btn.removeAttribute('disabled');
                    btn.addEventListener('click', function() {
                        tc = setInterval(drawcircularLoader, 60);
                        this.textContent = 'Animating';
                        this.style.backgroundColor = '#99999';
                        this.setAttribute('disabled', '');
                    });
                }
            };
      
            function drawcircularLoader() {
                with(context) {
                    clearRect(0, 0, 32, 32);
                    beginPath();
                    arc(8, 8, 6, C3qpi, (pct * 2 * Math.PI / 100 + C3qpi));
                    stroke();
                }
      
                // Update favicon to PNG image
                faviconLnk.href = canvas.toDataURL('image/png');
                if (pct === 100) {
                    clearInterval(tc);
                    btn.textContent = 'Animated';
                    btn.style.backgroundColor = 'green';
                    return;
                }
                pct++;
            }
        </script>
        <style>
            body {
                width: 450px;
                height: 300px;
                margin: 10px;
                text-align: center;
            }
              
            h1 {
                color: green;
            }
              
            #animateBtn {
                background-color: #1c2e46;
                border-radius: 2px;
                border: none;
                color: white;
                font-family: inherit;
                font-size: inherit;
                padding: 0px 5px;
                letter-spacing: 1px;
                cursor: pointer;
            }
              
            #animateBtn:focus {
                outline: none;
            }
              
            #animateBtn[disabled] {
                cursor: default;
            }
              
            .height {
                height: 10px;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <b>How to use circular animation on favicon image</b>
        <div class="height"> </div>
        <br>
      
        <!-- Canvas nad button for animation -->
        <button id="animateBtn">Animate Favicon </button>
        <br>
        <br>
        <canvas id="canvasId" width=32 height=32></canvas>
    </body>
      
    </html>
  • Producción:
    • Ejemplo 2: En este ejemplo, la implementación de dibujar un cuadrado que transforma el favicon en una imagen animada.

      <!DOCTYPE html>
      <html lang="en">
        
      <head>
          <meta charset="UTF-8">
          <link rel="shortcut icon" href="gfgFavicon.png" width=32px>
          <script language="javascript">
              onload =() => {
        
                  var canvas = document.getElementById("canvas");
                  context = canvas.getContext('2d');
        
                  if (!!context) {
                      var animateBtn = document.getElementById("animateBtn");
                      faviconVar = document.querySelector('link[rel*="icon"]');
                      
                      // The styles used for the square which will 
                      // be animated in place of favicon 
                      let linerGradient = context.createLinearGradient(0, 0, 32, 32);
                      linerGradient.addColorStop(0, '#8be8a7');
                      linerGradient.addColorStop(1, '#297d4c');
                      context.strokeStyle = linerGradient;
                      context.lineWidth = 10;
                      
                      // On page refresh , the button is enabled
                      if (animateBtn.disabled) animateBtn.removeAttribute('disabled');
                      animateBtn.addEventListener('click', function() 
                      {
                          
                          // Variable used for drawing incrementation
                          n = 0,
                              
                              // Speed interval for animation 
                              loadingInterval = setInterval(drawSquareLoader, 80);
        
                          this.textContent = 'Animating...';
                          this.style.backgroundColor = '#297d4c';
                          
                          //Once the drawing is done, the button is again disabled
                          this.setAttribute('disabled', '');
                      });
                  }
              };
        
              // Function for drawing square in canvas in a incrementing way
              function drawSquareLoader() {
                  with(context) {
                          clearRect(0, 0, 32, 32);
                          beginPath();
                      
                          // One fourth time taken to draw
                          if (n <= 25) {
        
                              moveTo(0, 0);
                              lineTo((32 / 25) * n, 0);
                          }
                      
                          // Between second quarter of drawing
                          else if (n > 25 && n <= 50) {
        
                              moveTo(0, 0);
                              lineTo(32, 0);
                              moveTo(32, 0);
                              lineTo(32, (32 / 25) * (n - 25));
                          }
                      
                          // Between third quarter of drawing
                          else if (n > 50 && n <= 75) {
        
                              moveTo(0, 0);
                              lineTo(32, 0);
                              moveTo(32, 0);
                              lineTo(32, 32);
                              moveTo(32, 32);
                              lineTo(-((32 / 25) * (n - 75)), 32);
                          }
                      
                          // Between  last quarter
                          else if (n > 75 && n <= 100) {
        
                              moveTo(0, 0);
                              lineTo(32, 0);
                              moveTo(32, 0);
                              lineTo(32, 32);
                              moveTo(32, 32);
                              lineTo(0, 32);
                              moveTo(0, 32);
                              lineTo(0, -((32 / 25) * (n - 100)));
                          }
                      
                          //Function to draw the path
                          stroke();
                      }
                  
                      // Assigning the drawing to favicon after 
                      // converting into PNG image
                  faviconVar.href = canvas.toDataURL('image/png');
                  
                  // After the drawing is finished 
                  if (n === 100) {
                      clearInterval(loadingInterval);
                      animateBtn.textContent = 'Favicon Loaded';
                      animateBtn.style.backgroundColor = '#bbbbbb';
                      return;
                  }
                  
                  // Increment the variable used to keep
                  // track of drawing intervals
                  n++;
              }
          </script>
        
          <title>Animation on favicon image</title>
          <style>
              body {
                  width: 450px;
                  height: 300px;
                  margin: 10px;
                  text-align: center;
              }
              h1 {
                  color: green;
              }
              html {
                  background: #f4f6fa;
              }
                
              #animateBtn {
                  background: #1c2e46;
                  color: white;
                  font: inherit;
                  border: none;
                  padding: 0px 5px;
                  letter-spacing: 1px;
                  cursor: pointer;
                  border-radius: 2px;
              }
                
              canvas {
                  margin: auto;
                  display: block;
              }
                
              .height {
                  height: 10px;
              }
          </style>
      </head>
        
      <body>
          <h1>GeeksforGeeks</h1>
          <b>How to use animation on favicon image</b>
          <div class="height"> </div>
          <br>
          <button id="animateBtn">Animate Favicon</button>
          <br>
          <br>
          <canvas id="canvas" width=32 height=32></canvas>
        
      </body>
        
      </html>
    • Producción:

    Publicación traducida automáticamente

    Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *