जावास्क्रिप्ट में फेविकॉन कैसे बनाएं?

Question

मैं एक वेबसाइट पर favicon जोड़ना चाहता हूं ताकि यह टैब की पहचान कर सके। मैं नहीं चाहता कि फ़ेविकॉन फ़ाइल हो, हालांकि। जावास्क्रिप्ट में एक बनाने का सबसे अच्छा तरीका क्या है?

कारण

• एक फ़ेविकॉन फाइल एक अतिरिक्त HTTP अनुरोध जो पृष्ठ लोड समय बढ़ जाती है की आवश्यकता है।
• वेब सर्वर बदलना स्थिर सामग्री को किसी अन्य फैशन में बदल सकता है, जो सिरदर्द का कारण बनता है।

पीएस: मैंने a solution as an answer प्रस्तुत किया है, लेकिन मुझे आश्चर्य है कि कोई बेहतर तरीका है या नहीं।

Answer 1

यदि सरल, फ़ॉर्म आधारित ग्राफिक्स पर्याप्त हैं, तो कोई फेविकॉन बनाने के लिए HTML5 कैनवास का उपयोग कर सकता है। modify a favicon image after loading it पर सफल प्रयास हुए हैं। आकस्मिक रूप से मूल कैनवास एपीआई का उपयोग कर जावास्क्रिप्ट में पूरी तरह से एक फेविकॉन बना सकते हैं। निम्न उदाहरण बनाता है और उस पर एक हरे वर्ग के साथ एक ग्रे फ़ेविकॉन सेट:

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

वर्तमान में पुरानी संस्करणों के लिए इंटरनेट एक्सप्लोरर (< 9) एक Explorer Canvas की तरह एक वैकल्पिक हल की जरूरत है। इसे कैसे करें official instructions देखें।