El rincón de JMACOE

Google Calendar dio a conocer un nuevo favicon, que provoco unas pocas menciones en Twitter. La primera, probablemente más importante era de Cennydd:

El nuevo icono de Google Calendar es muy diferente al de Google. Me gusta.

Luego Danny acamparon en las siguientes plataformas

Veo que Google Calendar tiene un nuevo icono. Se podría usar la fecha actual en lugar de «31»

Así que vamos a arreglar eso.

¿Cómo se hace?

El truco aquí es utilizar un elemento canvas y exportar los datos de la imagen como png. Desde que los favicons pueden pngs entonces sabemos que esto es posible. Ten en cuenta que esta técnica se ha hecho antes.

La configuración necesita crear dos imágenes de calendarios: uno con la fecha, si esto no funciona (por defecto a algo así como 31) y el segundo sin el texto actualizado. Por alguna razón, replique en el icono de Google Calendar en Photoshop:

El plan ahora es utilizar el favicon de plantilla y establecer el texto encima. Simple.

El mínimo punto de partida

Comience el documento mediante la inclusión del elemento link favicon en la cabecera:

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

La version «completa» del favicon con 31 en ella esta lista. A continuación vamos a usar JavaScript para crear dinámicamente el favicon.

El uso canvas para el favicons dinámico

Necesitamos los siguientes puntos para este trabajo efectivo:

1. Un canvas que no tiene que vivir en el DOM, que es de 16×16 – el tamaño de nuestro favicon
2. La plantilla de la imagen favicon
3. Una vez, y sólo una vez, la imagen de plantilla se ha cargado, luego seguimos agregando el texto
4. La fecha en un formato de dos caracteres, es decir, 04 es la cuarta

Eso es todo. Para connivencia he añadido un id al elemento link para que puedo cambiar el href cuando la imagen está lista. El siguiente JavaScript se pueden incluir en cualquier lugar por debajo del elemento link:

(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';
}

})();

La parte importante está a la orden en el que se ejecuta el código. Crea un elemento image, y agrega un controlador de eventos onload. Cuando este evento onload se ejecuta, se dibuja la imagen sobre el canvas con CTX.drawImage(this, 0, 0). This se refiere a la imagen que el evento onload manipula, y 0, 0 es la posición superior izquierda para empezar a dibujar .

A continuación el estilo del texto y dibujamos en ella.

Finalmente utilizando canvas.toDataURL ponemos el nuevo href en el link.

Prueba a cambiar la fecha para probarlo.

Unas pocas personas hubieran hecho constar que, en realidad tratando de cambiar favicons en IE no es posible. He leído todo esto un poco ahora, y parece que no hay una forma – algo bueno nos estamos agregando un toque de sensualidad a continuación, ¿eh?