Dynamic Favicons: एक badge या live status दिखाएँ
browser tab पर वह लाल badge बस एक favicon है जिसे फिर से draw किया जा रहा है. इसे बिना किसी build step के कैसे करें, यहाँ देखें.
सिर्फ़ एक GIF क्यों न इस्तेमाल करें?
आप एक animated GIF को favicon के रूप में set कर सकते हैं, लेकिन support असमान है. Firefox इसे animate करता है. Safari सिर्फ़ पहला frame दिखाता है. Chrome का व्यवहार versions में बदलता रहा है. यह सजावट के लिए ठीक है, लेकिन live badge के लिए यह गलत tool है, क्योंकि आप runtime पर GIF जो दिखाता है उसे बदल नहीं सकते.
एक count या status के लिए जो tab खुले रहने के दौरान update होता है, आपको JavaScript में image को फिर से draw करना होगा. एक canvas आपको एक असली pixel buffer देता है जिसमें आप paint कर सकते हैं, फिर उसे favicon link को एक data URI के रूप में सौंप सकते हैं.
यह कैसे काम करता है
- 1
अपना base icon load करें
अपनी सामान्य favicon image को एक छोटे canvas पर draw करें, आमतौर पर 32x32. यह वह icon है जो users तब देखते हैं जब badge करने के लिए कुछ नहीं होता.
- 2
ऊपर badge paint करें
जब कोई count हो, तो एक कोने में एक छोटा भरा हुआ circle draw करें और उसके अंदर number render करें. इसे high-contrast रखें ताकि यह 32 pixels पर पढ़ा जा सके.
- 3
favicon href swap करें
favicon link का href canvas output पर set करें. browser तुरंत आपकी नई image के साथ tab को repaint कर देता है.
- 4
बदलाव पर update करें
count बदलने पर draw-and-swap को फिर से चलाएँ, और जब यह शून्य पर आ जाए तो plain icon फिर से draw करें.
swap, plain JavaScript में
function setFaviconBadge(count) {
const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
// draw your base icon first (an <img> you preloaded)
ctx.drawImage(baseIcon, 0, 0, 32, 32);
if (count > 0) {
ctx.fillStyle = "#e5484d";
ctx.beginPath();
ctx.arc(23, 9, 9, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.font = "bold 12px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(count > 9 ? "9+" : String(count), 23, 10);
}
let link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement("link");
link.rel = "icon";
document.head.appendChild(link);
}
link.href = canvas.toDataURL("image/png");
}baseIcon एक Image है जिसे आपने एक बार load किया. number बदलने पर setFaviconBadge(unread) call करें. display को 9+ पर cap करें ताकि दो digits पढ़ने योग्य रहें.
सामान्य सवाल
मैं browser tab में unread count कैसे दिखाऊँ?
अपने icon और number वाले एक badge को एक canvas पर draw करें, फिर favicon link का href canvas.toDataURL() पर set करें. count बदलने पर इसे फिर से चलाएँ. सामान्य web pages के लिए कोई अलग tab-badge API नहीं है.
क्या मैं favicon के रूप में एक animated GIF इस्तेमाल कर सकता हूँ?
आप कर सकते हैं, लेकिन support असंगत है. Firefox इसे animate करता है, Safari पहला frame दिखाता है, और Chrome बदलता रहा है. एक live badge के लिए जो update होता है, इसके बजाय canvas का उपयोग करें और href swap करें.
क्या dynamic favicon performance को नुकसान पहुँचाता है?
नहीं. एक 32x32 canvas draw करना और एक data URI set करना सस्ता है. बस केवल तभी redraw करें जब value बदले, timer पर नहीं, और आपको लागत महसूस नहीं होगी.