फेविकॉन मानक 2026
वेब आइकन की अपेक्षाएँ बदल चुकी हैं। यहाँ जानें क्या रखें ताकि डेस्कटॉप, मोबाइल और PWA पर आपकी पहचान साफ दिखे।
पैक में क्या मिलता है
एक ही आधुनिक स्टैक — नए ब्राउज़र, iOS, Android और PWA के लिए पर्याप्त कवरेज, 2026 के अनुरूप।
SVG फेविकॉन
प्राथमिक विकल्प: अनंत स्केलिंग; CSS मीडिया क्वेरी से हल्का/गहरा थीम भी बदल सकते हैं।
ICO फ़ॉलबैक
पुराने ब्राउज़र व कुछ डेस्कटॉप UI के लिए 32×32 या 48×48 वाला एक लीगेसी फ़ाइल।
Apple Touch Icon
180×180 PNG — iPhone, iPad और Safari होम स्क्रीन शॉर्टकट के लिए।
वेब मैनिफ़ेस्ट
JSON फ़ाइल जो PWA व्यवहार और Android पर maskable आइकन परिभाषित करती है।
थीम के अनुकूल आइकन
SVG फेविकॉन में मीडिया क्वेरी लगाकर हल्की या गहरी ब्राउज़र UI में भी लोगो स्पष्ट रह सकता है — बिना उपयोगकर्ता को स्विच कराए।
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }PWA व maskable आइकन
नई PWA अक्सर maskable आइकन माँगती हैं: OS आइकन को गोल, स्क्विर्कल आदि आकार में काट सकता है, इसलिए महत्वपूर्ण चिह्न «सुरक्षित क्षेत्र» के भीतर होना चाहिए।
पैक जेनरेट करते समय Perfect Metadata सुरक्षित क्षेत्र के लिए पैडिंग ध्यान में रखता है — Android या ChromeOS पर कटा हुआ लोगो कम दिखे।
मानक लागू करना
2026 में अपेक्षित कवरेज के लिए इस स्निपेट को अपने HTML के <head> में चिपकाएँ।
<!-- <head> में शामिल करें -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">लागू करने के लिए तैयार?
एक ही फ़्लो में सारे आसेट बनाएँ — मुफ़्त, वर्तमान मानकों के अनुरूप।