फ़ेविकॉन (.ico) बनाम PNG

.ico प्रारूप विशेष रूप से एक ही बाइनरी कंटेनर में एकाधिक आइकन आकार रखने के लिए बनाया गया था। एक अच्छी तरह से निर्मित favicon.ico में 16×16, 32×32, 48×48 और 64×64 पिक्सेल के फ्रेम होते हैं। जब किसी ब्राउज़र को किसी टैब के लिए फ़ेविकॉन की आवश्यकता होती है, तो वह .ico फ़ाइल खोलता है, ICO निर्देशिका पढ़ता है, और उस फ़्रेम का चयन करता है जो आवश्यक डिस्प्ले आकार से सबसे अधिक मेल खाता है। यह बहु-आकार क्षमता PNG पर .ico का निर्णायक लाभ है।

PNG एक एकल-छवि प्रारूप है। PNG फ़ाइल में बिल्कुल एक रिज़ॉल्यूशन पर एक छवि होती है। अकेले PNG के साथ कई आकारों को कवर करने के लिए, आपको स्पष्ट `sizes=` विशेषताओं के साथ कई फ़ाइलों और कई `<link>` टैग की आवश्यकता है। यह अधिक शब्दाडंबरपूर्ण है, लेकिन प्रत्येक रिज़ॉल्यूशन पर कौन सी छवि प्रस्तुत की जाती है, इस पर सटीक नियंत्रण की अनुमति देता है। PNG किसी भी दिए गए रिज़ॉल्यूशन पर BMP-एन्कोडेड ICO फ्रेम की तुलना में बेहतर दोषरहित संपीड़न का भी समर्थन करता है।

ब्राउज़र अनुकूलता वह है जहां .ico निर्णायक रूप से जीतता है। प्रत्येक ब्राउज़र - जिसमें लीगेसी IE, पुराने Edge, प्राचीन Safari संस्करण और अस्पष्ट आला ब्राउज़र शामिल हैं - बिना किसी `<link>` टैग की आवश्यकता के डोमेन रूट से /favicon.ico प्राप्त करता है। भले ही आप लिंक टैग को पूरी तरह से हटा दें, ब्राउज़र एक परंपरा के रूप में GET /favicon.ico का प्रयास करेंगे। PNG को सही MIME प्रकारों के साथ स्पष्ट `<link rel='icon' type='image/png'>` टैग की आवश्यकता होती है या इसे अनदेखा कर दिया जाता है।

पारदर्शिता समर्थन .ico और PNG के बीच बराबर है। दोनों प्रारूप 8-बिट अल्फा चैनल (प्रति पिक्सेल पूर्ण पारदर्शिता) का समर्थन करते हैं। हालाँकि, .ico केवल तभी पारदर्शिता बनाए रखता है जब इसके आंतरिक फ्रेम PNG संपीड़न का उपयोग करते हैं, BMP का नहीं। पुराने ICO एनकोडर कभी-कभी BMP पर डिफ़ॉल्ट होते हैं, जिसमें सीमित (1-बिट) पारदर्शिता होती है। हमेशा एक आधुनिक जनरेटर का उपयोग करें जो PNG-संपीड़ित .ico फ़्रेम उत्पन्न करता है।

फ़ाइल आकार की तुलना संदर्भ पर निर्भर करती है. एक एकल 32×32 PNG एक बहु-आकार .ico फ़ाइल से छोटा है जो 16, 32, 48 और 64 px फ़्रेम को बंडल करता है। हालाँकि, .ico चार अलग-अलग PNG फ़ाइलों और चार लिंक टैग को प्रतिस्थापित करता है। कुल पेलोड के लिए, एक अच्छी तरह से संपीड़ित बहु-आकार .ico लगभग हमेशा संयुक्त PNGs के बराबर सेट से छोटा होता है।

PNG किसी भी व्यक्तिगत आकार पर संपीड़न दक्षता पर जीतता है। PNG संपीड़न एल्गोरिथ्म (DEFLATE/zlib) विशेष रूप से तेज किनारों और सीमित रंग पट्टियों के साथ फ्लैट-रंग लोगो और आइकन-शैली कलाकृति के लिए प्रभावी है। इष्टतम संपीड़न पर 32×32 PNG लोगो 200 बाइट्स से कम हो सकता है। छवि सामग्री की परवाह किए बिना .ico के अंदर समतुल्य BMP फ़्रेम हमेशा 4 KB होता है।

Google खोज फ़ेविकॉन पात्रता के लिए, .ico और PNG दोनों समर्थित हैं। Google का क्रॉलर पहले आपके HTML में लिंक किए गए फ़ेविकॉन को लाता है, या /favicon.ico पर वापस आ जाता है। न्यूनतम आवश्यकता 48×48 पिक्सेल और एक सार्वजनिक रूप से पहुंच योग्य URL है। `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` के साथ जुड़ा उचित आकार का PNG इसे उसी आकार के .ico बंडल की तरह ही संतुष्ट करता है।

डार्क मोड का व्यवहार विभिन्न प्रारूपों में भिन्न होता है। PNG फ़ाइलें उपयोगकर्ता की रंग योजना के अनुकूल नहीं हो सकतीं - लिंक टैग href को गतिशील रूप से स्वैप करने के लिए आपको JavaScript की आवश्यकता होगी, जो नाजुक है। .ico प्रारूप में कोई डार्क-मोड क्षमता नहीं है। डार्क-मोड फ़ेविकॉन अनुकूलन के लिए, केवल SVG एक एम्बेडेड `@media (prefers-color-scheme: dark)` स्टाइल ब्लॉक के माध्यम से इसे मूल रूप से समर्थन करता है। PNG और .ico को SVG ओवरले के साथ जोड़ा जाना चाहिए।

इष्टतम आधुनिक सेटअप दोनों प्रारूपों को जोड़ता है। यूनिवर्सल फ़ॉलबैक के रूप में `<link rel='icon' href='/favicon.ico'>`, रेटिना स्पष्टता के लिए `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` और स्केलेबल डार्क-मोड समर्थन के लिए `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` का उपयोग करें। जो ब्राउज़र SVG फ़ेविकॉन को समझते हैं वे SVG का चयन करते हैं; अन्य लोग PNG तक पहुँच जाते हैं; प्राचीन ब्राउज़रों को .ico मिलता है।

Windows OS एकीकरण एक .ico-केवल डोमेन है। डेस्कटॉप शॉर्टकट, फ़ाइल एक्सप्लोरर आइकन और Windows टास्कबार पिन सभी .ico प्रारूप को पढ़ते हैं। यदि आपका कोई उपयोगकर्ता आपकी साइट को Windows टास्कबार पर पिन करता है या आपके URL के लिए एक डेस्कटॉप शॉर्टकट बनाता है, तो केवल /favicon.ico का उपयोग शॉर्टकट आइकन के रूप में किया जाता है। इस संदर्भ में PNG फ़ाइलों को पूरी तरह से नजरअंदाज कर दिया गया है।

180×180 apple-touch-icon के लिए, PNG ही एकमात्र वैध प्रारूप है। iOS होम-स्क्रीन आइकन के लिए .ico नहीं पढ़ता है - इसके लिए विशेष रूप से `<link rel='apple-touch-icon'>` के माध्यम से लिंक किए गए PNG की आवश्यकता होती है। यह एक ऐसा मामला है जहां PNG को न केवल प्राथमिकता दी जाती है बल्कि आवश्यक भी है।

सर्वर कॉन्फ़िगरेशन को नज़रअंदाज़ नहीं किया जाना चाहिए. यदि स्पष्ट रूप से कॉन्फ़िगर नहीं किया गया है तो कई वेब सर्वर गलत सामग्री प्रकार (`image/x-icon` के बजाय `text/plain`) के साथ .ico प्रदान करते हैं। PNG फ़ाइलों में होस्टिंग प्लेटफ़ॉर्म पर व्यापक MIME प्रकार का समर्थन है। यदि आप देखते हैं कि आपका favicon.ico लोड नहीं हो रहा है, तो जांचें कि आपका सर्वर ICO अनुरोधों के लिए `Content-Type: image/x-icon` या `image/vnd.microsoft.icon` लौटाता है।

favicon generator दोनों प्रारूपों को एक साथ आउटपुट करता है। आपको चुनने की ज़रूरत नहीं है - डाउनलोड पैकेज में favicon.ico, 32×32 और 180×180 पर स्टैंडअलोन PNG फ़ाइलें और पूर्ण आधुनिक स्टैक के लिए SVG शामिल हैं। इस पैकेज का उपयोग करने का मतलब है कि ICO बनाम PNG प्रश्न का उत्तर स्वचालित रूप से दिया गया है: दोनों का उपयोग करें, प्रत्येक उस संदर्भ में जहां यह उत्कृष्ट है।

संपूर्ण प्रारूप तुलना के लिए जिसमें SVG भी शामिल है, best favicon format guide देखें। वह मार्गदर्शिका बताती है कि प्रत्येक उपयोग के मामले के लिए किस प्रारूप को प्राथमिकता देनी है - मानक वेबसाइट, PWA, ई-कॉमर्स स्टोर और डेवलपर टूल - और आपके फ़ेविकॉन स्टैक को चुनने के लिए एक निर्णय मैट्रिक्स प्रदान करता है।