Jak utworzyć favicon w javascript?

Question

Chcę dodać stronę favicon do witryny, aby móc zidentyfikować jej kartę. Nie chcę jednak, żeby favicon był plikiem. Jaki jest najlepszy sposób na utworzenie go w JavaScript?

Powody

• plik favicon wymaga dodatkowego żądania HTTP, który wydłuża czas ładowania strony.
• Zmiana serwera WWW może zmienić zawartość statyczną na inną modę, co powoduje bóle głowy.

PS: Przedstawiłem temu a solution as an answer, ale zastanawiam się, czy istnieje lepszy sposób.

Answer 1

Jeśli wystarczy prosta grafika na formularzu, można użyć Canvas HTML5 do utworzenia ulubionych. Podjęto udane próby uzyskania modify a favicon image after loading it. Analogicznie można utworzyć favicon całkowicie w javascriptu przy użyciu podstawowego interfejsu API. Poniższy przykład tworzy i ustawia szarą favicon z zielonym placu na nim:

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

aktualnie przestarzałych wersji Internet Explorer (< 9) trzeba obejście jak Explorer Canvas. Zobacz, jak to zrobić: official instructions.