¿Cómo crear un favicon en javascript?

Question

Quiero agregar un favicon a un sitio web para poder identificar su pestaña. No obstante, no quiero que el favicon sea un archivo. ¿Cuál es la mejor manera de crear uno en Javascript?

Razones

• Un archivo favicon requiere una solicitud HTTP adicional que aumenta el tiempo de carga de la página.
• Cambiar el servidor web puede cambiar el servicio de contenido estático de otra manera, lo que causa dolores de cabeza.

PD: He presentado a solution as an answer a esto, pero me pregunto si hay una manera mejor.

Answer 1

Si basta con los gráficos basados ​​en formularios, se puede usar HTML5 Canvas para crear un favicon. Ha habido intentos exitosos de modify a favicon image after loading it. Análogamente, uno puede crear un favicon completamente en javascript usando la API básica de lienzo. El siguiente ejemplo crea y establece un favicon gris con un cuadrado verde en ella:

<script> 
    var canvas = document.createElement('canvas'); 
    canvas.width = 16; 
    canvas.height = 16; 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "#aaa"; 
    ctx.fillRect(0, 0, 16, 16); 
    ctx.fillStyle = "#afa"; 
    ctx.fillRect(4, 4, 8, 8);    
    var link = document.createElement('link'); 
    link.type = 'image/x-icon'; 
    link.rel = 'shortcut icon'; 
    link.href = canvas.toDataURL("image/x-icon"); 
    document.getElementsByTagName('head')[0].appendChild(link); 
</script> 

Para las versiones actualmente obsoletas Internet Explorer (< 9) se necesita una solución como Explorer Canvas. Vea el official instructions sobre cómo hacer eso.