⇪

Faviconos con canvas

facebook-svg gplus-svg twitter-svg

Podemos crear un favicono PNG utilizando <canvas>, el nuevo elemento de HTML5, y JavaScript.

1. Empezamos creando un <canvas> flotante, que se encuentra fuera de pantalla. 

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = 32;
ctx.canvas.height = 32;

Este <canvas> no pertenece al DOM ( Document Object Model ) y por lo tanto no será visible.

2. Dibujamos en el <canvas>. En este caso dibujamos un círculo rojo con un radio de 15px.

var centerX = ctx.canvas.width/2;
var centerY = ctx.canvas.height/2;
var r = 15;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(centerX,centerY,r,0,2*Math.PI, true);
ctx.fill();

3. Creamos el favicono. Para esto creamos un nuevo elemento <link>:

var favicon = document.createElement('link');

lo populamos con atributos:

favicon.type = 'image/x-icon';
favicon.rel = 'shortcut icon';
favicon.href = canvas.toDataURL("image/x-icon");

el valor del atributo href del favicono es la imagen dibujada en el canvas pasada a data:uri.

4. Finalmente añadimos el favicono ( appendChild(favicon) ) al <head> de nuestra página.

document.getElementsByTagName('head')[0].appendChild(favicon);

  // creamos un canvas flotante
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  ctx.canvas.width = 32;
  ctx.canvas.height = 32;

  // dibujamos en el canvas
  var centerX = ctx.canvas.width / 2;
  var centerY = ctx.canvas.height / 2;
  var r = 15;
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(centerX, centerY, r, 0, 2 * Math.PI, true);
  ctx.fill();

  // creamos un nuevo elemento 																	
  var favicon = document.createElement('link');
  // lo populamos de atributos
  favicon.type = 'image/x-icon';
  favicon.rel = 'shortcut icon';

  // el valor del atributo href del favicono es la imagen dibujada en el canvas pasada a data:uri
  favicon.href = canvas.toDataURL('image/x-icon');

  document.getElementsByTagName('head')[0].appendChild(favicon);

Vea cómo queda: favicono creado con <canvas>, el nuevo elemento de HTML5, y JavaScript. En este ejemplo, al refrescar la página el color del favicono cambia.