Come creare un favicon in javascript?

Question

Desidero aggiungere un favicon a un sito Web per poter identificare la sua scheda. Non voglio che la favicon sia un file, comunque. Qual è il modo migliore per crearne uno in Javascript?

Motivi

• Un file favicon richiede una richiesta HTTP supplementare che aumenta il tempo di caricamento della pagina.
• La modifica del server Web potrebbe modificare il contenuto statico in un altro modo, il che causa mal di testa.

PS: Ho presentato a solution as an answer a questo, ma mi chiedo se c'è un modo migliore.

Answer 1

Se la grafica semplice basata su moduli è sufficiente, è possibile utilizzare HTML5 Canvas per creare una favicon. Ci sono stati tentativi riusciti a modify a favicon image after loading it. Analogamente si può creare un favicon interamente in javascript usando l'API canvas di base. L'esempio seguente crea e imposta una favicon grigio con un quadrato verde su di esso:

<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> 

Per le versioni attualmente obsolete di Internet Explorer (< 9) uno ha bisogno di una soluzione come Explorer Canvas. Vedi lo official instructions su come farlo.