Favicon का आकार: आपको वास्तव में 2025 में कौन से चाहिए

"Favicon साइज़" खोजें और आपको विरोधाभासी संख्याओं की दीवार मिलती है: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512। उनमें से अधिकतर सूचियां एक दशक पहले लिखी गई थीं और कभी अपडेट नहीं हुईं। व्यावहारिक रूप से, एक आधुनिक साइट को लगभग चार फाइलों की आवश्यकता होती है, और आप सभी को favicon जनरेटर के साथ एक ही बार में बना सकते हैं — यह पूरी तरह से आपके ब्राउज़र में चलता है, इसलिए आपका लोगो कभी आपकी मशीन से बाहर नहीं जाता।

यहाँ दिया गया है कि प्रत्येक आकार वास्तव में किसके लिए है, और आप क्या सुरक्षित रूप से छोड़ सकते हैं।

आकार जो अभी भी मायने रखते हैं

16x16 और 32x32 — ब्राउज़र टैब और बुकमार्क

यह क्लासिक favicon है। 16x16 वह है जो आप भीड़ भरी टैब पट्टी में देखते हैं; 32x32 का उपयोग उच्च-DPI स्क्रीन, बुकमार्क बार, और कुछ पता बार UI पर किया जाता है। दोनों को परंपरागत रूप से एक एकल favicon.ico फाइल में बंडल किया जाता है, जो एक बार में कई रेजोल्यूशन रख सकती है। Windows डेस्कटॉप शॉर्टकट के लिए भी उसी .ico से 48x48 खींचता है, इसलिए इसे शामिल करने की कीमत लगभग कुछ नहीं है।

180x180 — Apple टच आइकन

जब कोई iPhone या iPad पर "होम स्क्रीन में जोड़ें" को टैप करता है, तो Safari 180x180 पर apple-touch-icon.png की खोज करता है। यदि यह नहीं है, तो iOS आपके पृष्ठ का स्क्रीनशॉट लेता है और इसके बजाय उपयोग करता है, जो भयानक दिखता है। यह एक PNG हर वर्तमान iOS डिवाइस को कवर करता है क्योंकि सिस्टम आवश्यकतानुसार डाउनस्केल करता है।

192x192 और 512x512 — Android और PWA

Android Chrome और इंस्टॉलेबल वेब ऐप्स आपके site.webmanifest से आइकन पढ़ते हैं। 192 होम-स्क्रीन आइकन है; 512 का उपयोग स्प्लैश स्क्रीन और ऐप सूचियों के लिए किया जाता है। यदि आप कभी चाहते हैं कि आपकी साइट इंस्टॉलेबल हो, तो आपको दोनों की आवश्यकता है।

SVG — वैकल्पिक लेकिन अच्छा

Firefox और Chrome दोनों एक SVG favicon का समर्थन करते हैं, जो किसी भी आकार पर तीव्र रहता है और फाइल के अंदर एक मीडिया क्वेरी के साथ डार्क मोड का जवाब दे सकता है। यह एक बोनस है, प्रतिस्थापन नहीं — Safari और पुराने ब्राउज़र अभी भी रेस्टर संस्करण चाहते हैं।

आप क्या छोड़ सकते हैं

64x64, 96x96, 128x128, Windows टाइल छवियों का पूरा सेट, और एक दर्जन विरासत apple-touch-icon-76x76-शैली फाइलें। वे ऐसे उपकरणों के लिए आवश्यक थे जो अधिकतर चले गए हैं। बीस आइकन फाइलें भेजना आपके रिपो को सूज देता है और आपको कुछ भी मापने योग्य नहीं देता है।

HTML

फाइलों को अपनी साइट रूट में डालें और इसे <head> में जोड़ें:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

और मैनिफेस्ट में:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

16 पिक्सल के लिए डिजाइन करना

कठिन हिस्सा निर्यात नहीं है, यह है कि एक पूर्ण लोगो 16x16 पर गूदा बन जाता है। कुछ चीजें जो मदद करती हैं:

• पूरे लोगो के बजाय एक टुकड़ा का उपयोग करें। एक अक्षर, एक ग्लिफ, एक आकार। शब्दचिन्ह टैब साइज़ पर अपठनीय हैं।
• वर्ग से शुरू करें। यदि आपका स्रोत एक चौड़ा लोगो है, तो जनरेटर को खाली स्थान से लेटरबॉक्स न करने के लिए पहले इसे वर्ग में काटें।
• कंट्रास्ट को उच्च रखें। पतली रूपरेखाएं गायब हो जाती हैं। ठोस आकार जीवित रहते हैं।
• पृष्ठभूमि का निर्णय लें। एक पारदर्शी PNG प्रकाश और अंधेरे ब्राउज़र क्रोम के अनुकूल है; यदि आपका चिन्ह गहरा है, तो इसके बजाय इसे एक ठोस रंग की टाइल देने पर विचार करें। यदि आपके पास केवल एक सपाट JPG है तो आप सेकंड में लोगो स्क्रीनशॉट से पृष्ठभूमि को हटा सकते हैं।
• सुरक्षित क्षेत्र को ध्यान में रखें। Android आइकन को सर्कल और स्क्वायर में मास्क करता है, इसलिए अपने 512 आर्टवर्क के किनारे के चारों ओर लगभग 10% पैडिंग छोड़ दें।

यदि आप favicon की पृष्ठभूमि को अपनी साइट के ब्रांड रंग से मेल कर रहे हैं, तो छवि रंग पिकर एक मौजूदा स्क्रीनशॉट से सटीक हेक्स खींचेगा — theme-color मेटा टैग के लिए भी सुविधाजनक है।

पूरे सेट को एक बार में जेनरेट करें

कुछ भी अपलोड न करें: निःशुल्क ब्राउज़र-आधारित favicon जनरेटर में एक वर्ग PNG या SVG ड्रॉप करें और यह .ico, Apple टच आइकन, और 192/512 PNG को स्थानीय रूप से, आपके स्वयं के टैब में उत्पादन करता है। कोई सर्वर को कुछ नहीं भेजा जाता है, कोई साइन-अप नहीं है, और आपके अप्रकाशित लोगो की कोई प्रति किसी और के स्टोरेज बकेट में नहीं बैठती है।

फिर अपने ब्राउज़र को ज़ूम आउट करें, टैब को देखें, और एकमात्र सवाल पूछें जो मायने रखता है: क्या आप बता सकते हैं कि यह क्या है?