Animated Favicons (GIF और JavaScript)
Animated favicon आमतौर पर आइकन के रूप में इस्तेमाल किया गया एक animated GIF होता है; Firefox और कुछ Chromium builds इसे tab में चलाते हैं, जबकि Safari और अन्य सिर्फ़ पहला frame दिखाते हैं। साइटें मुख्यतः live गतिविधि का संकेत देने के लिए animation इस्तेमाल करती हैं (एक spinner, एक unread count, एक recording dot), अक्सर GIF पर निर्भर रहने के बजाय JavaScript से आइकन बदलकर। एक brand mark के लिए, एक स्थिर आइकन अधिक स्पष्ट और अधिक व्यापक रूप से समर्थित है।
Support असमान है, इसलिए इसे एक enhancement मानें
favicon के रूप में रेफ़र किया गया एक animated GIF Firefox और कुछ Chromium builds में चलता है, पर Safari और कई अन्य सिर्फ़ पहला frame रेंडर करते हैं। इसलिए animation कभी भार-वहन करने वाला नहीं हो सकता: आइकन को जो भी कहना है वह अकेले उस पहले frame में पठनीय होना चाहिए।
इसी वजह से, असल दुनिया के अधिकांश "animated" favicons GIF होते ही नहीं। वे एक script होते हैं जो आइकन को एक canvas से फिर से बनाता है और link tag के href को बदलता है: कुछ लोड होते समय एक spinner, recording के दौरान एक लाल dot, या mark के ऊपर पेंट किया गया एक unread count। यह सटीक नियंत्रण देता है और हर जगह उसी link-swap तंत्र के ज़रिए काम करता है।
live status के लिए JavaScript मार्ग
एक unread badge या एक status dot दिखाने के लिए, हर state को एक canvas पर बनाएँ, उसे export करें, और favicon link के href को उस परिणाम पर सेट करें। Browser tab आइकन को तुरंत update कर देता है। इसी तरह mail और chat ऐप्स tab में एक संख्या डालते हैं, और यह वहाँ एक स्थिर आइकन में शालीनता से गिर जाता है जहाँ scripting बंद हो।
Animated favicon FAQ
क्या animated favicons Chrome और Safari में काम करते हैं?
Support असंगत है। Firefox GIF favicons को animate करता है, Chromium में यह कभी-कभी काम करता है, और Safari आमतौर पर सिर्फ़ पहला frame दिखाता है। animation के दिखने पर कभी भरोसा न करें।
मैं favicon में एक unread count कैसे दिखाऊँ?
JavaScript में आइकन और badge को एक canvas पर बनाएँ, फिर favicon link के href को canvas output पर सेट करें। जब भी count बदले इसे update करें। यह वही तकनीक है जो mail और chat ऐप्स इस्तेमाल करते हैं।
क्या मुझे एक animated favicon इस्तेमाल करना चाहिए?
एक brand mark के लिए, नहीं। एक स्थिर आइकन अधिक स्पष्ट और सार्वभौमिक रूप से समर्थित है। animation को असली live status के लिए बचाकर रखें, और उसे एक GIF के बजाय एक JavaScript link swap से लागू करें।