Javascript'te bir favicon nasıl oluşturulur?

Question

Bu sekmeyi tanımlayabilmek için bir web sitesine favicon eklemek istiyorum. Yine de favicon'un bir dosya olmasını istemiyorum. Javascript'te bir tane oluşturmanın en iyi yolu nedir?

Nedenleri

• sık kullanılan simgeler dosya sayfa yüklenme süresini artırır ek bir HTTP isteği gerektirir.
• Web sunucusunu değiştirmek, baş ağrısına neden olan başka bir yere hizmet veren statik içeriği değiştirebilir.

PS: Buna a solution as an answer'u sundum ama daha iyi bir yol olup olmadığını merak ediyorum.

Answer 1

Basit, form tabanlı grafikler yeterliyse, bir favicon oluşturmak için HTML5 Canvas'ı kullanabilirsiniz. modify a favicon image after loading it için başarılı girişimler olmuştur. Benzer şekilde, temel tuval API'sı kullanılarak tamamen bir javascriptte bir favicon oluşturulabilir. Aşağıdaki örnek oluşturur ve üzerinde yeşil bir kare ile gri bir favicon ayarlar: Şu anda eski sürümleri için

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

Internet Explorer (< 9) biri Explorer Canvas gibi geçici bir çözüm gerekiyor. Bunun nasıl yapılacağı hakkında official instructions'a bakın.