aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

El cambio de favicon de Google Calendar ha hecho que Danny Hope se pregunte si se podría hacer que el favicon mostrara la fecha actual en lugar del 31 que está mostrando ahora mismo.

Remy Sharp a modo de investigación personal se propuso conseguirlo, y tras unas cuantas pruebas logró generar un favicon dinámico usando <canvas /> y javascript para mostrar la fecha actual en lugar del estático 31.

(Ver Imagen)

Para ello, limpió el icono de Google dejando espacio para que los números cambien en función del día, unas pocas líneas de código y voala!

¿Como?

Como ya conocemos, la llamada para informar un favicon en cualquier página web:

<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />

Marco en negrita el ID que ha indicado para localizar el elemento más fácilmente en el código Javascript.

(function () {
var canvas = document.createElement('canvas'),
    ctx,
    img = document.createElement('img'),
    link = document.getElementById('favicon').cloneNode(true),
    day = (new Date).getDate() + '';

if (canvas.getContext) {
  canvas.height = canvas.width = 16; // set the size
  ctx = canvas.getContext('2d');
  img.onload = function () { // once the image has loaded
    ctx.drawImage(this, 0, 0);
    ctx.font = 'bold 10px "helvetica", sans-serif';
    ctx.fillStyle = '#F0EEDD';
    if (day.length == 1) day = '0' + day;
    ctx.fillText(day, 2, 12);
    link.href = canvas.toDataURL('image/png');
    document.body.appendChild(link);
  };
  img.src = 'ical-icon.png';
}

})();

El código javascript, como podemos ver se encarga de generar un nuevo elemento <img /> en el que alojaremos la información creada con el elemento <canvas /> con el día incrustado dentro. Simplemente genial.