ऐसा फेविकॉन कैसे बनाएं जो Retina स्क्रीन पर धुंधला न दिखे

कभी पूरे वेब के लिए एक छोटी favicon.ico काफी थी। कई साल से ऐसा नहीं है, और उसे अब भी काफी मान लेना ही वजह है कि इतने सारे आइकन धुंधले दिखते हैं।

लेखक: PulsarKit · 8 सितंबर 2026 को प्रकाशित · 16 अक्टूबर 2026 को अपडेट किया गया

एक छोटी आइकन फाइल कभी भी हर स्क्रीन के लिए काफी नहीं थी

ब्राउजर का टैब, फोन की होम स्क्रीन पर शॉर्टकट और हाई-डेंसिटी लैपटॉप डिस्प्ले पर ऐप का आइकन, तीनों को अलग-अलग पिक्सल साइज चाहिए। एक ही छोटे आइकन को खींचकर सब जगह फिट करें, तो वह इनमें से एक जगह शार्प दिखेगा और बाकी हर जगह धुंधला। पुरानी favicon.ico, जिसे ब्राउजर आज भी साइट के रूट से मांगते हैं, अब भी इस हल का हिस्सा है। पर वह उस वेब के लिए बनी थी, जिसमें स्क्रीन का रिजॉल्यूशन आज से कहीं कम था, और उसे कभी इकलौती फाइल के तौर पर नहीं सोचा गया था।

पूरे आइकन सेट में इतनी अलग-अलग फाइलें क्यों होती हैं

सही सेट, जैसा फेविकॉन जनरेटर एक मूल इमेज से बनाता है, एक साथ कई कामों के लिए होता है, न कि एक ही काम के कई साइज के लिए। इसमें 16 और 32 पिक्सल की PNG हैं: सामान्य और ज्यादा पिक्सल डेंसिटी वाले ब्राउजर टैब के लिए। 180 पिक्सल का आइकन तब काम आता है, जब कोई साइट को iPhone की होम स्क्रीन पर जोड़ता है। 192 और 512 पिक्सल के आइकन प्रोग्रेसिव वेब ऐप के मैनिफेस्ट में दर्ज होने चाहिए, वरना ऐप इंस्टॉल ही नहीं हो सकता। हर साइज इसलिए है कि कोई न कोई ठीक वही साइज मांगता है। यह बेवजह का दोहराव नहीं है। इनमें से एक भी छोड़ दें, तो वह जगह किसी ज्यादा धुंधले विकल्प से काम चलाती है, या वहां कुछ भी नहीं दिखता।

वह इकलौती फाइल, जो जानबूझकर पारदर्शी नहीं रखी जाती

जब कोई साइट को अपने फोन की होम स्क्रीन पर जोड़ता है, तो iOS पारदर्शी आइकन के नीचे कोई ढंग का बैकग्राउंड नहीं रखता। वह हर पारदर्शी हिस्से को एकदम काले रंग से भर देता है, इसलिए पारदर्शी बैकग्राउंड पर बना साफ-सुथरा लोगो होम स्क्रीन पर पहुंचते ही एक काली, भद्दी टाइल बन जाता है। उस जगह वाले आइकन की पारदर्शिता को पहले से, जानबूझकर, किसी असली बैकग्राउंड रंग पर फ्लैट करना पड़ता है, ताकि वह सेट के बाकी साइज की तरह पारदर्शी न रहे। बाकी हर आइकन में पारदर्शिता वहां रह सकती है, जहां वह मूल इमेज में है, क्योंकि ब्राउजर टैब या डेस्कटॉप शॉर्टकट उसे सही तरह दिखाते हैं।

वेक्टर सोर्स से 16 पिक्सल का आइकन ज्यादा शार्प क्यों बनता है

SVG के रूप में बना लोगो (सादे बिटमैप लोगो को PNG से SVG में ट्रेस करके SVG बनाया जा सकता है) अपनी वेक्टर आकृतियों से हर जरूरी साइज पर नए सिरे से रेंडर हो सकता है। उसे एक बार बड़े साइज में बनाकर हर छोटे रूप के लिए बार-बार छोटा नहीं करना पड़ता। फर्क सबसे ज्यादा सेट के सबसे छोटे साइज पर दिखता है। एक बड़े मास्टर बिटमैप से छोटा किया गया लोगो 16 पिक्सल पर अक्सर गड्डमड्ड हो जाता है: पतली रेखाएं और बारीक डिटेल गायब हो जाती हैं। वेक्टर पाथ से उसी छोटे साइज पर रेंडर किया गया रूप अपनी रेखाएं साफ रखता है, क्योंकि उसे किसी बड़ी इमेज से छोटा किया ही नहीं गया। वह शुरू से उसी साइज पर बना था। इसीलिए जब अलग से एक आइकन बनाना हो, तो उसे इमेज रिसाइजर से नहीं, बल्कि SVG से PNG में ठीक पिक्सल माप पर रेंडर किया जाता है। पतले वर्डमार्क या बारीक आउटलाइन वाले लोगो के लिए यही फर्क तय करता है कि टैब बार में आइकन पहचान में आएगा या एक ग्रे धब्बा बनकर रह जाएगा।

मास्केबल आइकन इसलिए होता है, क्योंकि Android आइकन के आकार की परवाह नहीं करता

Android इंस्टॉल किए गए ऐप के आइकन को उस आकार में क्रॉप करता है, जो किसी खास डिवाइस या लॉन्चर ने चुना है: गोला, गोल कोनों वाला चौकोर या स्क्विर्कल। आइकन किस आकार में बनाया गया था, इससे उसे कोई फर्क नहीं पड़ता। इसलिए साधारण चौकोर आइकन का जरूरी हिस्सा ठीक किनारों पर कट सकता है, और यह सिर्फ इस पर निर्भर करता है कि कौन-सा आकार लागू हुआ। मास्केबल आइकन इस दिक्कत से बचता है: उसका हर अहम हिस्सा इमेज के बीच वाले लगभग अस्सी प्रतिशत भाग में रहता है। इससे हर किनारे के आसपास सुरक्षित मार्जिन बचता है, जिसे कोई भी आकार क्रॉप कर दे, तो भी डिजाइन का कोई जरूरी हिस्सा नहीं जाता।

आम गलतियां: छोटी सोर्स इमेज, और सेट जो पेज से कभी लिंक नहीं होता

धुंधला आइकन सेट शायद ही कभी जनरेटर की वजह से बनता है। हर साइज 512 पिक्सल की मास्टर इमेज से बनता है, इसलिए इससे छोटी हर सोर्स इमेज को खींचकर वहां तक बड़ा किया जाता है। लगभग 260 पिक्सल से छोटी इमेज को दोगुना या उससे भी ज्यादा बड़ा करना पड़ता है, और बड़े साइज धुंधले रह जाते हैं। कम से कम 512 × 512 से शुरू करें, या इससे भी बेहतर, SVG से; 32 पिक्सल से छोटी सोर्स इमेज स्वीकार ही नहीं की जाती। दूसरा फैसला यह है कि चौकोर न होने वाला लोगो चौकोर कैसे बने: बीच से क्रॉप करने पर लोगो का निशान बड़ा रहता है, पर चौड़ा वर्डमार्क कट सकता है; पूरी इमेज फिट करके किनारों को किसी रंग से भरने पर सब कुछ दिखता है, पर निशान छोटा हो जाता है। जो लोगो ऊंचाई से बहुत ज्यादा चौड़ा है, उसके लिए प्रतीक और नाम वाले पूरे लोगो की जगह सिर्फ प्रतीक वाला चौकोर रूप आमतौर पर बेहतर सोर्स होता है। तीसरी गलती जनरेट करने के बाद होती है। आठ फाइलें, मास्केबल आइकन के साथ नौ, साइट के रूट में जाती हैं, और head-snippet.html के टैग हर पेज के head में; अगर फाइलें किसी सबफोल्डर में हैं, तो स्निपेट में href की वैल्यू उसी हिसाब से बदलें, वरना टैग उन फाइलों की ओर इशारा करेंगे जो वहां हैं ही नहीं। आखिर में 16 पिक्सल वाले आइकन को इमेज व्यूअर में नहीं, असली ब्राउजर टैब में जांचें: उस साइज पर पतली आउटलाइन या वर्डमार्क ग्रे धब्बा बन जाता है, और इसका इलाज ज्यादा शार्प एक्सपोर्ट नहीं, बल्कि सरल निशान है।

इस लेख में इस्तेमाल हुए टूल

फेविकॉन जनरेटरएक लोगो से पूरा फेविकॉन सेट बनाएं: हर साइज की PNG, कई साइज वाली ICO, मैनिफेस्ट और head में पेस्ट करने के लिए HTML टैग।

PNG से SVGPNG को अपने ब्राउजर में ट्रेस करके स्केलेबल SVG बनाएं। यह कुछ ही रंगों वाले लोगो और फ्लैट आइकन के लिए है, फोटो के लिए नहीं।

SVG से PNGSVG फाइलों को किसी भी स्केल पर या सटीक पिक्सल साइज में अपने ब्राउजर में ही PNG में बदलें। ड्रॉइंग बनने से पहले स्क्रिप्ट और बाहरी लिंक हटा दिए जाते हैं।