फ़ेविकॉन के लिए ICO बनाम PNG
ICO सार्वभौमिक लेकिन विरासत है; PNG आधुनिक है लेकिन स्पष्ट लिंकिंग की आवश्यकता है। इस तुलना में ब्राउज़र व्यवहार, फ़ाइल आकार, पारदर्शिता, काम किए गए उदाहरण और डुप्लिकेशन सिरदर्द के बिना दोनों प्रारूपों को शिप करने का तरीका शामिल है।
यह तुलना अभी भी क्यों मायने रखती है?
फ्रंट-एंड में नई टीमें अक्सर PNG चुनती हैं क्योंकि यह आधुनिक लगता है, या ICO क्योंकि 2012 के कुछ ट्यूटोरियल में ऐसा कहा गया था। 2026 में सही उत्तर लगभग हमेशा दोनों है, जिसका उपयोग विभिन्न नौकरियों के लिए किया जाता है।
ICO एक कंटेनर प्रारूप है: एक फ़ाइल, कई एम्बेडेड बिटमैप। PNG प्रति फ़ाइल एक एकल रेखापुंज छवि है। PWA इंस्टॉल बैनर की तुलना में टैब के लिए क्या लाना है, यह तय करते समय ब्राउज़र उनके साथ अलग तरह से व्यवहार करते हैं।
गलत चयन करने से Windows शॉर्टकट में टैब धुंधले हो जाते हैं, डाउनलोड फूल जाते हैं या आइकन गायब हो जाते हैं। यह मार्गदर्शिका बताती है कि प्रत्येक प्रारूप कहाँ जीतता है और उन्हें कैसे संयोजित किया जाए।
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
ICO: सार्वभौमिक फ़ॉलबैक
प्रत्येक डेस्कटॉप ब्राउज़र /favicon.ico का अनुरोध करेगा, भले ही आपने कभी <link> टैग न जोड़ा हो। वह अंतर्निहित फ़ेच यही कारण है कि रूट .ico अनिवार्य बना हुआ है।
कंटेनर के अंदर, प्रत्येक प्रविष्टि चौड़ाई, ऊंचाई और पिक्सेल डेटा संग्रहीत करती है (अक्सर PNG-64×64 और ऊपर के आकार के लिए संपीड़ित)। क्लाइंट प्रदर्शन घनत्व के निकटतम मिलान को चुनता है।
Windows एक्सप्लोरर, आउटलुक लिंक पूर्वावलोकन और लीगेसी RSS रीडर अभी भी .ico पर निर्भर हैं। इसे छोड़ देने से उन उपयोगकर्ताओं के आइकन टूट जाते हैं जो आपके HTML <head> पर कभी नहीं जाते।
PNG: किसी भी घनत्व पर पिक्सेल-परिपूर्ण
PNG आपको प्रति फ़ाइल एक ज्ञात रिज़ॉल्यूशन देता है। इसे स्पष्ट रूप से लिंक करें: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">।
हाई-डीपीआई डिस्प्ले से फायदा होता है क्योंकि आप 32×32 PNG शिप कर सकते हैं, जिसे ब्राउज़र 16×16 CSS स्लॉट पर 2× घनत्व पर प्रस्तुत करता है - एक साधारण 16×16 अपस्केल की तुलना में तेज।
PWA को 192×192 और 512×512 पर PNG मेनिफेस्ट आइकन की आवश्यकता होती है। Apple टच आइकन 180×180 PNG का उपयोग करते हैं। ये आकार क्लासिक बहु-आकार .ico वर्कफ़्लो के अंतर्गत नहीं आते हैं।
साथ-साथ तुलना
ब्राउज़र समर्थन: ICO अंतर्निहित /favicon.ico फ़ेच पर जीतता है। जब आप रेटिना टैब और Android लॉन्चर के लिए आकार घोषित करते हैं तो PNG जीत जाता है।
फ़ाइल का आकार: PNG-संपीड़ित 128 और 256 प्रविष्टियों के साथ एक अच्छी तरह से निर्मित .ico अक्सर छह अलग-अलग PNG फ़ाइलों से छोटा होता है। ढीले PNG तब जीतते हैं जब आपको केवल एक या दो आकारों की आवश्यकता होती है।
पारदर्शिता: सही ढंग से एन्कोड किए जाने पर दोनों अल्फा का समर्थन करते हैं। खराब .ico टूलींग पारदर्शिता को सफेद कर देती है; एक जनरेटर का उपयोग करें जो कंटेनर के अंदर PNG अल्फा को संरक्षित करता है।
संलेखन: PNG किसी भी छवि व्यूअर में पूर्वावलोकन करना आसान है। ICO के लिए एक बहु-आकार के निर्यात उपकरण की आवश्यकता होती है - यही कारण है कि जनरेटर मौजूद हैं।
व्यावहारिक उदाहरण
न्यूनतम ब्लॉग: मूल में केवल favicon.ico। शून्य <लिंक> टैग आवश्यक; व्यक्तिगत साइटों के लिए स्वीकार्य.
SaaS मार्केटिंग साइट: favicon.ico प्लस favicon.svg प्लस 180×180 apple-touch-icon.png। <head> में घोषित; डेस्कटॉप, iOS और सोशल एंबेड को कवर करता है।
इंस्टॉल करने योग्य PWA: लीगेसी टैब क्लाइंट के लिए favicon.ico रखते हुए android-chrome-192x192.png और android-chrome-512x512.png को site.webmanifest में जोड़ें।
Windows डेस्कटॉप ऐप रैपर: इलेक्ट्रॉन या टौरी के लिए 256×256-सक्षम .ico भेजें; निश्चित आकारों पर इन-ऐप यूआई के लिए वैकल्पिक PNG।
फैसला: दोनों का एक साथ उपयोग करें
सार्वभौमिक समर्थन और अंतर्निहित फ़ेच के लिए एक बहु-आकार favicon.ico शिप करें। ऐप्पल-टच-आइकन, मेनिफेस्ट आइकन और वैकल्पिक प्रति-आकार <लिंक> टैग के लिए PNG वेरिएंट जोड़ें।
जब आपका चिह्न वेक्टर-अनुकूल हो और आप डार्क-मोड-जागरूक टैब चाहते हों तो शीर्ष पर SVG परत लगाएं। ICO मंजिल बनी हुई है; SVG और PNG अनुकूलन हैं।
एक्सटेंशन का नाम बदलकर PNG को ICO में न बदलें। वास्तविक .ico फ़ाइलों को एक उचित निर्देशिका संरचना और प्रति-आकार फ़्रेम की आवश्यकता होती है।
अक्सर पूछे जाने वाले प्रश्नों
क्या ICO को अस्वीकृत कर दिया गया है? नहीं, ब्राउज़र अभी भी इसे डिफ़ॉल्ट रूप से लाते हैं। यह डिज़ाइन में विरासत है, उपयोग में नहीं।
क्या कोई PNG favicon.ico की जगह ले सकता है? सुरक्षित नहीं. आप अंतर्निहित /favicon.ico अनुरोधों और कई Windows सतहों से चूक जाएंगे।
कौन सा PNG आकार सबसे अधिक मायने रखता है? टैब के लिए 32×32, iOS के लिए 180×180, PWA के लिए 192 और 512।
क्या ICO एनीमेशन का समर्थन करता है? क्लासिक एनिमेटेड favicon अप्रचलित हैं। इसके बजाय एक स्थिर बहु-आकार .ico भेजें।
समस्या निवारण
Chrome PNG दिखाता है लेकिन Edge एक धुंधला आइकन दिखाता है: Edge अभी भी पुराना .ico कैश पढ़ रहा हो सकता है। .ico को एक कुरकुरा 32×32 फ्रेम के साथ पुनर्जीवित करें।
ICO फ़ाइल 300KB+ है: संभवतः 256×256 पर असम्पीडित BMP प्रविष्टियाँ। कंटेनर के अंदर PNG संपीड़न के साथ पुनः निर्यात करें।
PNG स्पष्ट दिखता है, ICO नहीं: हो सकता है कि आपने .ico को PNG से छोटे स्रोत से बनाया हो। दोनों के लिए समान 512×512 मास्टर का उपयोग करें।
केवल ICO में पारदर्शिता खो गई: आपके टूल ने PNG-संपीड़ित प्रविष्टियों के बजाय 32-बिट BMP को एन्कोड किया। जनरेटर स्विच करें या अल्फा संरक्षित के साथ पुनः निर्यात करें।
त्वरित निर्णय मार्गदर्शिका
यदि आपको अंतर्निहित /favicon.ico समर्थन या Windows शॉर्टकट की आवश्यकता है: ICO भेजें।
यदि आपको स्पष्ट नियंत्रण के साथ रेटिना टैब शार्पनेस की आवश्यकता है: PNG <लिंक> टैग को 32×32 पर जोड़ें या ICO में बंडल आकार जोड़ें।
यदि आपको PWA इंस्टॉल यूआई की आवश्यकता है: PNG 192 और 512 पर मेनिफेस्ट में - ICO मेनिफेस्ट आइकन को प्रतिस्थापित नहीं करता है।
यदि आपको टैब में अनंत स्केलिंग और डार्क-मोड CSS की आवश्यकता है: SVG जोड़ें, लेकिन ICO को नीचे रखें।
जब एक आइकन वाली स्थिर साइट पर बैंडविड्थ मायने रखती है: एक अच्छी तरह से संपीड़ित बहु-आकार ICO अकेले अक्सर ICO प्लस तीन ढीले PNG से छोटा होता है।
जब डिज़ाइन साप्ताहिक रूप से पुनरावृत्त होता है: SVG को Git में स्रोत के रूप में रखें, एक स्क्रिप्ट के माध्यम से प्रत्येक रिलीज़ टैग पर ICO और PNG निर्यात को पुन: उत्पन्न करें।
केवल PNG से ICO+PNG पर माइग्रेट किया जा रहा है
व्यू सोर्स या डेवटूल्स के साथ वर्तमान टैग का ऑडिट करें। ध्यान दें कि प्रत्येक rel='icon' और apple-touch-icon href पहले से ही तैनात है।
उसी मास्टर PNG से एक बहु-आकार favicon.ico उत्पन्न करें जिसका उपयोग आपने ढीली फ़ाइलों के लिए किया था। असंबद्ध संपत्तियों का नाम बदले बिना रूट /favicon.ico को बदलें।
यदि मौजूदा PNG <link> टैग काम करते हैं तो उन्हें रखें। सूची में सबसे पहले ICO जोड़ें ताकि पुराने पार्सर्स इसे जल्दी देख सकें।
कम ट्रैफ़िक के दौरान तैनात करें, विशेष रूप से /favicon.ico के लिए CDN कैश को शुद्ध करें, और कर्ल -I से सत्यापित करें कि सामग्री-प्रकार छवि/x-आइकन या छवि/vnd.microsoft.icon है।
माइग्रेशन के बाद आइकन यूआरएल पर क्रॉल त्रुटियों के लिए Google खोज कंसोल पर खोजें। टूटे हुए रूट आइकन कभी-कभी लॉग में सॉफ्ट 404 के रूप में सामने आते हैं।