Data URI (base64) Favicons
Data URI favicon image को सीधे link tag में base64 text के रूप में embed करता है (href="data:image/png;base64,...") बजाय किसी फ़ाइल की ओर इशारा करने के, जो एक HTTP request हटा देता है। यह browser tab के लिए काम करता है, पर हर उस जगह टूट जाता है जो URL से आइकन लाती है: /favicon.ico requests, apple-touch-icon, manifest icons, crawlers और link unfurlers। इसलिए यह असली फ़ाइलों का विकल्प नहीं है।
यह क्या देता है, और क्या लेता है
आइकन को base64 के रूप में inline करना एक request बचाता है: image HTML के अंदर यात्रा करती है, इसलिए browser tab के लिए एक अलग फ़ाइल नहीं लाता। एक latency-संवेदनशील page पर एक छोटे आइकन के लिए यह आकर्षक लग सकता है।
समस्या हर वह चीज़ है जो आपका HTML नहीं पढ़ती। /favicon.ico को path से माँगने वाले एक crawler या link unfurler को कुछ नहीं मिलता। iOS को एक असली apple-touch-icon फ़ाइल चाहिए; Android manifest में सूचीबद्ध फ़ाइलें पढ़ता है। इनमें से कोई भी ऐसे आइकन का उपयोग नहीं कर सकता जो सिर्फ़ एक link tag के अंदर text के रूप में मौजूद हो, और base64 blob हर उस HTML response को फुला देता है जिस पर वह होता है।
यह दिखता कैसा है
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />tab के लिए ठीक, पर URL से आइकन माँगने वाली किसी भी चीज़ के लिए अदृश्य।
Data URI favicon FAQ
क्या मैं एक base64 favicon इस्तेमाल कर सकता हूँ?
browser tab के लिए, हाँ। पर यह /favicon.ico requests, apple-touch-icon, manifest, या crawlers को संतुष्ट नहीं करेगा, इसलिए एक असली साइट पर यह सिर्फ़ असली फ़ाइलों का पूरक हो सकता है, प्रतिस्थापन नहीं।
क्या एक inline favicon iOS home screens पर काम करता है?
नहीं। iOS home screens apple-touch-icon इस्तेमाल करती हैं, जो एक असली फ़ाइल होनी चाहिए जिसे वह ला सके। एक favicon link में एक data URI home screen के लिए कुछ नहीं करता।
क्या एक data URI favicon performance के लिए अच्छा है?
यह एक छोटी request हटाता है पर encoded image को हर उस HTML response में embed करता है जो उसे ढोती है। एक ऐसे आइकन के लिए जो पहले लोड के बाद वैसे भी ज़ोर से cache हो जाता है, बचत आमतौर पर नगण्य होती है और फुलावट नहीं।