फेविकॉन को एनिमेट कैसे करें?

Question

इस तरह के एक फेविकॉन को एनिमेट कैसे करें?

यह फ़ायरफ़ॉक्स में ही काम करने लगता है।

Answer 1

हालांकि वर्तमान में केवल फ़ायरफ़ॉक्स द्वारा समर्थित अन्य ब्राउज़र भविष्य में इसका समर्थन करेंगे।

<link rel="icon" href="animated_favicon.gif" type="image/gif" > 

अतिरिक्त मदद और संसाधनों के लिए AnimatedFavIcon.com पर एक नज़र डालें: प्रभाव को प्राप्त करने के लिए, आप अपने सर्वर पर अपलोड करने के लिए gif और फिर अपने पेज के head अनुभाग के नीचे लाइन को जोड़ने की जरूरत है।

Answer 2

लगभग निश्चित रूप से जो आप खोज रहे हैं, लेकिन कुछ लोग अब तक क्लाइंट साइड जावास्क्रिप्ट में फेविकॉन को प्रोग्रामिक रूप से लिखने के लिए गए हैं। इस यूआरएल वर्ष वीडियोगेम फ़ेविकॉन में 'डिफेंडर' खेल दिखाता है:

http://www.p01.org/defender_of_the_favicon/

यह फ़ायरफ़ॉक्स, ओपेरा और सफारी में काम करता है, लेकिन IE के कम से कम पुराने संस्करणों में नहीं। मुझे यकीन नहीं है कि नवीनतम आईई क्या सक्षम हो सकता है।

इस पृष्ठ पर 'व्यू स्रोत' करना काफी रोचक बनाता है।

Answer 3

अपने एनिमेटेड gif को favicon.gif पर पुनर्नामित करें और अपने सर्वर पर जहां आपका index.html (या index.php ... या इसी तरह) है (public_html या इसकी उपनिर्देशिका यदि आपके पास अधिक साइटें हैं), तो यह स्वचालित रूप से काम करेगा ।

Answer 4

फ़ायरफ़ॉक्स

फ़ायरफ़ॉक्स एनिमेटेड फेविकॉन का समर्थन करता है। बस <link rel="icon"> टैग में GIF का कोई लिंक जोड़ें:

<link rel="icon" href="/favicon.gif"> 

तुम भी एनिमेटेड ICO फ़ाइल का उपयोग कर सकते हैं। इस मामले में ब्राउज़र जो एनिमेटेड फेविकॉन का समर्थन नहीं करता है केवल पहला फ्रेम प्रदर्शित करेगा।

अन्य ब्राउज़रों

अन्य ब्राउज़रों में आप एक फ़ेविकॉन जावास्क्रिप्ट का उपयोग चेतन कर सकते हैं। जीआईएफ फ्रेम में हर बार आपको जीआईएफ से एकल फ्रेम निकालना होगा और <link rel="favicon"> src बदलना होगा। उदाहरण के लिए इस कोड (JS Fiddle demo) देखें:

var $parent = document.createElement("div") 
    $gif = document.createElement("img") 
    ,$favicon = document.createElement("link") 

// Required for CORS 
$gif.crossOrigin = "anonymous" 

$gif.src = "https://i.imgur.com/v0oxdQ8.gif" 

$favicon.rel = "icon" 

// JS Fiddle always displays the result in an <iframe>, 
// so we have to add the favicon to the parent window 
window.parent.document.head.appendChild($favicon) 

// libgif.js requires the GIF <img> tag to have a parent 
$parent.appendChild($gif) 

var supergif = new SuperGif({gif: $gif}) 
    ,$canvas 

supergif.load(()=> { 
    $canvas = supergif.get_canvas() 
    updateFavicon() 
}) 

function updateFavicon() { 
    $favicon.href = $canvas.toDataURL() 
    window.requestAnimationFrame(updateFavicon) 
} 

_{मैं libgif.js इस्तेमाल किया GIF फ्रेम निकालने के लिए।}

दुर्भाग्यवश, एनीमेशन क्रोम में बहुत आसान नहीं है। फ़ायरफ़ॉक्स में यह बहुत अच्छा काम करता है, लेकिन फ़ायरफ़ॉक्स पहले से ही जीआईएफ फेविकॉन का समर्थन करता है।

favico.js लाइब्रेरी भी देखें।

भी देखें

• How to add a browser tab icon (favicon) for a website?
• Changing website favicon dynamically