वेबसाइटों के लिए सर्वोत्तम फ़ेविकॉन आकार

favicon को कई भौतिक पिक्सेल पर स्केल किया गया है: एक टैब में 16×16, रेटिना बुकमार्क बार पर 32×32, iPhone होम स्क्रीन पर 180×180, PWA स्प्लैश स्क्रीन पर 512×512। एक छवि उन सभी की अच्छी सेवा नहीं कर सकती।

एक छोटे स्रोत को अपग्रेड करने से धुंधलापन पैदा होता है। परीक्षण के बिना विस्तृत 1024×1024 को डाउनस्केल करने से बारीक रेखाएँ नष्ट हो जाती हैं। फिक्स उद्देश्य-निर्मित निर्यात का एक छोटा सेट है, या एक बहु-आकार .ico है जो सामान्य डेस्कटॉप फ़्रेमों को एम्बेड करता है।

पुराने ब्लॉग पोस्ट पर सूचीबद्ध हर आकार की शिपिंग बेकार है। बहुत कम शिपिंग से एक प्लेटफ़ॉर्म पर स्पष्ट अंतर रह जाता है। नीचे दिया गया मैट्रिक्स 2026 ब्राउज़रों में मापे गए वास्तविक अनुरोधों को दर्शाता है।

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.

डेस्कटॉप टैब आमतौर पर 16×16 CSS पिक्सेल आइकन प्रस्तुत करते हैं, जो डिस्प्ले घनत्व के आधार पर 16×16 या 32×32 डिवाइस पिक्सेल पर मैप होता है।

बुकमार्क बार और पिन किए गए टैब अक्सर 32×32 या 48×48 का उपयोग करते हैं। Chromium स्वचालित रूप से favicon.ico से निकटतम एम्बेडेड फ़्रेम चुन सकता है।

सभी तीन सामान्य टैब आकार (16, 32, 48) एक एकल बहु-आकार .ico के अंदर आराम से फिट होते हैं। यही कारण है कि .ico कंटेनर सबसे कुशल डेस्कटॉप डिलीवरी प्रारूप बना हुआ है।

Windows प्रारंभ मेनू, टास्कबार पिन और फ़ाइल एक्सप्लोरर शॉर्टकट संदर्भ और डिस्प्ले स्केलिंग के आधार पर 24×24, 32×32, 48×48, 64×64, 128×128, या 256×256 का अनुरोध कर सकते हैं।

Microsoft Windows ऐप्स के लिए व्यावहारिक सेट के रूप में 16, 24, 32, 48, 64, 128 और 256 का दस्तावेजीकरण करता है। favicon.ico में कम से कम 16 से 256 को बंडल करने से वेब favicon को लाभ होता है।

macOS देशी ऐप्स के लिए .icns को प्राथमिकता देता है लेकिन वेब शॉर्टकट के लिए .ico और PNG का आनंदपूर्वक उपभोग करता है। iOS होम-स्क्रीन आइकन के लिए .ico को अनदेखा करता है और ऐप्पल-टच-आइकन के माध्यम से एक समर्पित 180×180 PNG चाहता है।

वेब ऐप मैनिफ़ेस्ट के लिए किसी भी उद्देश्य वाले और वैकल्पिक रूप से छिपाने योग्य आइकन की आवश्यकता होती है। सामान्य आकार 192×192 और 512×512 PNG हैं।

Android Chrome इंस्टॉल यूआई और स्प्लैश स्क्रीन के लिए मेनिफेस्ट आइकन का उपयोग करता है। एक 512×512 स्रोत सफाई से डाउनस्केल करता है; 192×192-मात्र मेनिफेस्ट हाई-एंड फोन पर नरम दिखता है।

iOS होम-स्क्रीन प्लेसमेंट के लिए मेनिफेस्ट आइकन नहीं पढ़ता है। आपको <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> घोषित करना होगा.

16×16 — ब्राउज़र टैब (1× घनत्व)। 32×32 - रेटिना डिस्प्ले पर टैब और बुकमार्क। 48×48 — कुछ Windows यूआई संदर्भ और लीगेसी बुकमार्क उपयोग।

64×64 और 128×128 - उच्च स्केलिंग पर Windows शॉर्टकट। 256×256 - Windows पिन की गई टाइलें और उच्च-डीपीआई पूर्वावलोकन।

180×180 — ऐप्पल-टच-आइकन (iOS / iPadOS)। 192×192 और 512×512 - Android के लिए PWA मेनिफेस्ट आइकन और इंस्टाल संकेत।

व्यक्तिगत ब्लॉग: favicon.ico केवल 16/32/48 के साथ। यदि आपको iOS होम-स्क्रीन पॉलिश की परवाह नहीं है तो स्वीकार्य है।

कंपनी मार्केटिंग साइट: स्पष्ट रेटिना टैब के लिए .ico बंडल प्लस 180×180 ऐप्पल-टच-आइकन प्लस 32×32 PNG <लिंक>।

इंस्टॉल करने योग्य PWA: पूर्ण .ico, ऐप्पल-टच-आइकन, मेनिफेस्ट 192 + 512, स्केलेबल यूआई क्रोम के लिए वैकल्पिक SVG।

इलेक्ट्रॉन डेस्कटॉप ऐप: Windows .ico 16–256 के साथ; यदि आप ब्राउज़र के बाहर वितरित करते हैं तो macOS .icns अलग से।

बहु-आकार favicon.ico (16, 32, 48, 64, 128, 256) /favicon.ico पर।

iOS होम स्क्रीन के लिए 180×180 पर apple-touch-icon.png।

Android स्थापित सतहों के लिए site.webmanifest में एक 512×512 PNG।

यह तिकड़ी वास्तविक दुनिया के लगभग 95% आइकन अनुरोधों को कवर करती है। जब आप आधुनिक टैब में अनंत स्केलिंग और डार्क-मोड स्टाइल चाहते हैं तो SVG जोड़ें।

यदि यह .ico के अंदर है तो क्या मुझे 16×16 PNG की आवश्यकता है? नहीं, जब तक आप डिबगिंग के लिए स्पष्ट <link rel="icon" sizes="16x16"> नहीं चाहते।

क्या 120×120 अभी भी आवश्यक है? वह पुराना iOS आकार था। आधुनिक Safari 180×180 की अपेक्षा करता है।

64×64 favicons के बारे में क्या? Windows के लिए .ico के अंदर उपयोगी; एक स्टैंडअलोन PNG के रूप में शायद ही कभी इसकी आवश्यकता होती है।

क्या मैं 256×256 छोड़ सकता हूँ? केवल तभी जब आप Windows उच्च-डीपीआई शॉर्टकट पूर्वावलोकन के बारे में कभी परवाह नहीं करते। अधिकांश टीमें इसमें शामिल हैं।

iOS आइकन के कोने गोल हैं और कटा हुआ दिखता है: यह iOS मास्किंग है - सुरक्षित पैडिंग के साथ डिज़ाइन, आपकी फ़ाइल में कोई बग नहीं।

PWA इंस्टॉल एक सामान्य आइकन दिखाता है: मेनिफेस्ट आइकन गायब हैं या न्यूनतम 192×192 से नीचे हैं। Chrome DevTools → एप्लिकेशन के साथ JSON को मान्य करें।

रेटिना मैक पर टैब आइकन सॉफ्ट: सुनिश्चित करें कि favicon.ico में 32×32 फ्रेम हो, न कि केवल 16×16।

विशाल .ico डाउनलोड: आपने असम्पीडित 256×256 BMP एम्बेड किया है। कंटेनर के अंदर PNG संपीड़न के साथ पुनर्निर्माण करें।

CSS पिक्सेल भौतिक पिक्सेल नहीं हैं। 2× डिस्प्ले पर 16×16 टैब स्लॉट अक्सर तीक्ष्णता के लिए 32×32 बिटमैप लोड करता है।

यही कारण है कि 16 और 32 दोनों फ्रेम वाला favicon.ico रेटिना मैकबुक और उच्च-DPI Windows लैपटॉप पर एकल 16×16 PNG से बेहतर प्रदर्शन करता है।

Android PWA पूर्ण डिवाइस रिज़ॉल्यूशन पर स्प्लैश स्क्रीन पर मेनिफेस्ट आइकन प्रदर्शित करता है - 1440p फ़ोन तक फैला हुआ 192×192 स्रोत नरम दिखता है; 512×512 सफाई से डाउनस्केल।

iOS ऐप्पल-टच-आइकन संपत्तियों पर अपना स्वयं का मास्क और कोने का दायरा लागू करता है। सुरक्षित पैडिंग के साथ डिज़ाइन ताकि महत्वपूर्ण किनारे स्क्विर्कल द्वारा काटे न जाएं।

परीक्षण करते समय, 100% ब्राउज़र ज़ूम और 200% ओएस स्केलिंग पर टैब का स्क्रीनशॉट लें। यदि दोनों स्पष्ट दिखते हैं, तो आपका आकार मैट्रिक्स संभवतः सही है।

favicon.ico डाउनलोड करें और इसे एक टूल में खोलें जो एम्बेडेड फ़्रेमों को सूचीबद्ध करता है। पुष्टि करें कि 16, 32, 48 और कम से कम एक उच्च आकार का फ्रेम मौजूद है।

apple-touch-icon.png प्राप्त करें और किसी भी छवि निरीक्षक में आयाम जांचें - पुराने टेम्पलेट्स से 180×180 की अपेक्षा करें, 120×120 की नहीं।

site.webmanifest खोलें और आइकन सत्यापित करें[] में सही पथ और छवि/पीएनजी प्रकारों के साथ 192×192 और 512×512 शामिल हैं।

अपनी साइट को Chrome DevTools → एप्लिकेशन → मेनिफेस्ट में लोड करें। गुम या अमान्य प्रविष्टियाँ उपयोगकर्ताओं को टूटा हुआ इंस्टॉल डायलॉग देखने से पहले चेतावनी दिखाती हैं।

प्रत्येक फ़ाइल को उसके उपभोक्ता (टैब, iOS, PWA, Windows) पर मैप करते हुए एक स्प्रेडशीट रखें। भविष्य में आपको रीब्रांड के दौरान एसेट फ़ोल्डर को रिवर्स-इंजीनियर नहीं करना पड़ेगा।

नई डिवाइस कक्षाएं favicon भूमि में धीरे-धीरे दिखाई देती हैं। 512×512 मेनिफेस्ट आइकन आज फोल्डेबल और टैबलेट इंस्टॉल यूआई को अकेले 192 से बेहतर कवर करते हैं।

विदेशी आकारों (96×96, 120×120) से बचें जब तक कि एक विशिष्ट प्लेटफ़ॉर्म दस्तावेज़ अभी भी उन्हें अनिवार्य नहीं करता है - वे व्यापक लाभ के बिना लेखन का बोझ जोड़ते हैं।

मास्टर वेक्टर या 1024×1024 रैस्टर को अपने डिज़ाइन रेपो में संग्रहीत करें, भले ही आप इसे कभी भी शिप न करें। भविष्य के प्लेटफ़ॉर्म बड़े मेनिफेस्ट आइकन का अनुरोध कर सकते हैं।

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