2026 में आपको कौन-से फ़ेविकॉन साइज़ चाहिए? आदर्श सेट

2026 में आदर्श फ़ेविकॉन सेट यह है: 16, 32 और 48 px की छवियों वाली एक favicon.ico, एक 96x96 PNG (Google Search के लिए), एक वैकल्पिक SVG फ़ेविकॉन, एक 180x180 apple-touch-icon.png, और वेब ऐप मैनिफ़ेस्ट में घोषित 192x192 और 512x512 PNG (साथ में एक maskable 512)। Windows टाइल और पुराने Apple साइज़ की ज़रूरत तभी है जब आपको बहुत पुराने डिवाइस सपोर्ट करने हों। नीचे साइज़ तालिका, तैयार HTML और बचने योग्य आम गलतियों के साथ इसका कारण समझाया गया है।

फ़ेविकॉन की स्थिति पहले काफ़ी उलझी हुई थी: हर ब्राउज़र और ऑपरेटिंग सिस्टम अपना अलग साइज़ माँगता था, जिससे 20 पंक्तियों वाले कुख्यात <head> ब्लॉक बनते थे। आज इनमें से ज़्यादातर अप्रचलित हो चुका है। आधुनिक ब्राउज़र एक अच्छे आइकन को ही स्केल कर लेते हैं, iOS को एक ही साइज़ चाहिए, और Android मैनिफ़ेस्ट पढ़ता है। यह लेख बताता है कि वास्तव में क्या ज़रूरी है और क्या सिर्फ़ अच्छा-सा-होना है।

संक्षिप्त उत्तर: फ़ेविकॉन फ़ाइलों का आदर्श सेट

• साइट के रूट में favicon.ico (एक ही फ़ाइल में 16, 32, 48 px)। ब्राउज़र, फ़ीड रीडर और कई टूल आज भी अपने-आप /favicon.ico माँगते हैं।
• favicon.svg (वैकल्पिक, पर अनुशंसित): किसी भी साइज़ पर साफ़ दिखने और डार्क मोड सपोर्ट के लिए।
• स्पष्ट फ़ॉलबैक के रूप में PNG 16x16, 32x32 और 96x96। 96 px वाला संस्करण Google Search के लिए मददगार है, जिसे 48 px का गुणज चाहिए।
• 180x180 का apple-touch-icon.png, अपारदर्शी, बिना पारदर्शिता के।
• manifest.json में 192x192 और 512x512 PNG, साथ में Android के लिए एक maskable 512x512 आइकन।
• मोबाइल पर ब्राउज़र UI को रंग देने के लिए theme-color मेटा टैग।
• Windows टाइल (70, 150, 310 px) और browserconfig.xml, केवल पुराने Windows और IE11 की पिन की गई साइटों के लिए।

फ़ेविकॉन साइज़ तालिका: उद्देश्य, फ़ाइल नाम और प्राथमिकता

इस तालिका को चेकलिस्ट की तरह इस्तेमाल करें। "आवश्यक" का मतलब है कि इसके बिना सामान्य साइट टूटी हुई या अधूरी लगेगी; "अनुशंसित" का मतलब है गुणवत्ता में साफ़ सुधार; "वैकल्पिक" का मतलब है खास या पुराना उपयोग।

favicon.ico: एक ही फ़ाइल में 16, 32 और 48 px

ICO फ़ाइल एक कंटेनर है जिसमें कई बिटमैप होते हैं। एक अच्छी favicon.ico में 16x16, 32x32 और 48x48 छवियाँ होती हैं, ताकि ब्राउज़र या OS सबसे नज़दीकी मिलान चुन सके। इसे अपने डोमेन के रूट (https://example.com/favicon.ico) में रखें। भले ही आपका HTML कहीं और इशारा करे, कई क्रॉलर, RSS रीडर और पुराने ब्राउज़र आज भी ठीक इसी URL को माँगते हैं, इसलिए इसके होने से आपके लॉग में 404 का शोर नहीं होता।

किसी PNG का नाम बदलकर सीधे .ico न कर दें। ज़्यादातर ब्राउज़र इसे सह लेते हैं, पर कुछ टूल इसे अस्वीकार कर देते हैं और मल्टी-रेज़ोल्यूशन का लाभ भी चला जाता है। असली ICO एक्सपोर्ट करें।

PNG फ़ेविकॉन: 16, 32 और 96 px

स्पष्ट sizes वाले PNG लिंक ब्राउज़र को ICO पार्स किए बिना सबसे अच्छा बिटमैप चुनने देते हैं। व्यवहार में 32x32 हाई-DPI टैब को कवर करता है, और 16x16 आज लगभग फ़ालतू है। 96x96 साइज़ जोड़ना फ़ायदेमंद है, क्योंकि Google Search परिणामों के पास फ़ेविकॉन दिखाता है और ऐसा वर्गाकार आइकन चाहता है जिसका साइज़ 48 px का गुणज हो (48x48, 96x96, 144x144 आदि)। मोबाइल परिणामों के लिए छोटा करते समय 96 px की फ़ाइल Google को 48 px वाली से ज़्यादा तीखा स्रोत देती है।

डिज़ाइन सुझाव: 16 px पर बारीक विवरण गायब हो जाते हैं। गाढ़ा, सरल आकार, ऊँचा कंट्रास्ट और कम से कम (या बिना) टेक्स्ट इस्तेमाल करें। एक्सपोर्ट से पहले आप MakeFav एडिटर में अपने आइकन को ट्वीक और प्रीव्यू कर सकते हैं।

SVG फ़ेविकॉन और डार्क मोड

SVG फ़ेविकॉन एक छोटी-सी फ़ाइल होती है जो हर स्क्रीन डेंसिटी पर तीखी रहती है। Chromium-आधारित ब्राउज़र और Firefox इसे सपोर्ट करते हैं। Safari का सपोर्ट ऐतिहासिक रूप से सीमित रहा है, इसलिए कभी सिर्फ़ SVG पर निर्भर न रहें: ICO और PNG फ़ॉलबैक रखें।

सबसे बड़ा फ़ायदा थीमिंग है। चूँकि SVG में CSS हो सकता है, आप prefers-color-scheme के साथ आइकन को उपयोगकर्ता की कलर स्कीम के अनुसार ढाल सकते हैं:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

ध्यान दें कि यह मीडिया क्वेरी ब्राउज़र या OS की थीम को दर्शाती है, जिसे टैब बार इस्तेमाल करता है। यह आपकी अपनी वेबसाइट के थीम टॉगल का पालन नहीं करती।

एक ज्ञात अजीब बात: जब ICO और SVG दोनों सूचीबद्ध हों, तो Chrome ICO चुन सकता है। ICO को sizes="32x32" के साथ घोषित करने और SVG को उसके बाद सूचीबद्ध करने से Chrome SVG को प्राथमिकता देता है, जैसा नीचे दिए कोड में दिखाया गया है।

Apple touch icon: 180x180 और पुराने साइज़

जब कोई उपयोगकर्ता आपकी साइट को iOS या iPadOS होम स्क्रीन पर जोड़ता है, तो Safari apple-touch-icon इस्तेमाल करता है। आज एक अकेला 180x180 px PNG काफ़ी है: iOS इसे पुराने डिवाइस और iPad के लिए छोटा कर लेता है। इसका नाम apple-touch-icon.png रखें और रूट में रखें; अगर कोई लिंक टैग न हो तो iOS डिफ़ॉल्ट रूप से यही फ़ाइल खोजता है।

Apple आइकन के नियम:

• कोई पारदर्शिता नहीं। iOS पारदर्शी पिक्सेल को काले रंग से भर देता है, इसलिए पारदर्शी लोगो अक्सर काला धब्बा बन जाता है। ठोस बैकग्राउंड रंग जोड़ें।
• गोल कोने नहीं। iOS अपना गोल मास्क खुद लगाता है। पूरा वर्ग दें।
• मुख्य सामग्री को किनारों से दूर रखें, क्योंकि कोने कट जाते हैं।

पुराने साइज़ (57, 72, 76, 114, 120, 144, 152, 167) की ज़रूरत कब पड़ती है? केवल तब, जब आप iOS 6 या उससे पुराने को सपोर्ट करते हों, या iPad Pro (167 px) और iPad (152 px) के लिए प्रति-डिवाइस सटीक पिक्सेल नियंत्रण चाहते हों। 2026 में लगभग हर साइट के लिए अकेली 180x180 फ़ाइल ठीक है। नीचे दिए अधिकतम-संगतता सेटअप में पूर्णता के लिए कुछ शामिल हैं।

Android और PWA आइकन: 192, 512 और maskable

Android पर Chrome और PWA-सक्षम अन्य ब्राउज़र आइकन <link rel="icon"> से नहीं, बल्कि वेब ऐप मैनिफ़ेस्ट से पढ़ते हैं। इंस्टॉल योग्य बनने के लिए आपको कम से कम एक 192x192 और एक 512x512 PNG चाहिए। 192 px आइकन होम स्क्रीन और ऐप लॉन्चर पर इस्तेमाल होता है; 512 px आइकन स्प्लैश स्क्रीन और इंस्टॉल डायलॉग में दिखता है।

Maskable आइकन और सेफ़ ज़ोन

Android के अडैप्टिव आइकन डिवाइस के अनुसार वृत्त, squircle या किसी अन्य आकार में क्रॉप किए जा सकते हैं। Maskable आइकन सुरक्षित रूप से क्रॉप होने के लिए डिज़ाइन किया जाता है: ज़रूरी सामग्री सेफ़ ज़ोन के अंदर होनी चाहिए, यानी छवि के 80% व्यास वाला केंद्रित वृत्त (त्रिज्या भुजा के 40% के बराबर)। 512x512 फ़ाइल के लिए इसका मतलब है कि अपने लोगो को लगभग 410 px व्यास वाले वृत्त में रखें, और बैकग्राउंड रंग को चारों किनारों तक फैलाएँ ताकि मास्किंग के बाद कोई खाली जगह न दिखे।

Maskable आइकन को "purpose": "maskable" के साथ अलग प्रविष्टि के रूप में घोषित करें। एक ही फ़ाइल पर "any maskable" से बचें: मास्किंग के लिए ज़रूरी पैडिंग, आइकन को बिना मास्क दिखाए जाने पर बहुत छोटी दिखती है।

manifest.json का उदाहरण

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

फ़ाइल को application/manifest+json (या application/json) के रूप में सर्व करें और हर पेज से <link rel="manifest" href="/manifest.json"> के साथ लिंक करें। कुछ प्रोजेक्ट इसे site.webmanifest नाम देते हैं; नाम मायने नहीं रखता, लिंक मायने रखता है।

Windows टाइल और browserconfig.xml

Windows 8.1 और 10 उपयोगकर्ताओं को साइट को स्टार्ट मेनू में पिन करने देते हैं, और IE11 व पुराना Edge टाइल छवियाँ browserconfig.xml से पढ़ते हैं। सामान्य साइज़ हैं 70x70 (छोटा), 150x150 (मध्यम), 310x150 (चौड़ा) और 310x310 (बड़ा)। Chromium-आधारित Edge इसके बजाय मैनिफ़ेस्ट और सामान्य फ़ेविकॉन इस्तेमाल करता है, इसलिए यह एक पुरानी सुविधा है। इसे केवल तभी शामिल करें जब आपके दर्शकों में अब भी पुराने Windows सेटअप हों, जैसे कॉर्पोरेट परिवेश में।

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: ब्राउज़र UI को रंग देना

theme-color मेटा टैग मोबाइल ब्राउज़रों (और कुछ डेस्कटॉप ब्राउज़रों) को बताता है कि एड्रेस बार या टाइटल बार के लिए कौन-सा रंग इस्तेमाल करना है। यह फ़ेविकॉन नहीं है, पर उसी ब्रांडिंग सेट का हिस्सा है। आप लाइट और डार्क मोड के लिए अलग-अलग मान दे सकते हैं:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

न्यूनतम आधुनिक सेटअप बनाम अधिकतम संगतता

न्यूनतम आधुनिक सेटअप (ज़्यादातर साइटों के लिए अनुशंसित)

पाँच फ़ाइलें वास्तविक उपयोग के 99% से अधिक को कवर करती हैं: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), और दो मैनिफ़ेस्ट आइकन (192 और 512)। अगर Google Search में दिखना मायने रखता है तो 96x96 PNG जोड़ें, और अगर आप PWA देते हैं तो एक maskable आइकन जोड़ें।

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">

अधिकतम संगतता सेटअप

इसे तब चुनें जब आप व्यापक या एंटरप्राइज़ दर्शकों को सेवा देते हों, या हर संभव क्लाइंट को कवर करना चाहते हों। इसमें स्पष्ट PNG साइज़, पुराने Apple साइज़, Windows टाइल और थीम रंग जुड़ जाते हैं।

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

/ से शुरू होने वाले रूट-रिलेटिव पाथ पर ध्यान दें। वे हर पेज की गहराई पर काम करते हैं, जो हमें सबसे आम गलतियों तक ले आता है।

फ़ेविकॉन की आम गलतियाँ और उन्हें कैसे ठीक करें

1. गलत पाथ

href="favicon.ico" जैसा लिंक मौजूदा URL के सापेक्ष हल होता है, इसलिए यह / पर काम करता है पर /blog/post/ पर टूट जाता है। रूट-रिलेटिव (/favicon.ico) या पूर्ण URL इस्तेमाल करें। यह भी जाँचें कि फ़ाइलें सचमुच मौजूद हैं: हर URL को सीधे ब्राउज़र में खोलें और पक्का करें कि वह HTTP 200 लौटाता है, न कि 404 पेज या लॉगिन दीवार पर रीडायरेक्ट।

2. sizes एट्रिब्यूट का न होना या गलत होना

sizes के बिना ब्राउज़रों को आइकन जाँचने के लिए उन्हें डाउनलोड करना पड़ता है, और वे गलत आइकन चुन सकते हैं। PNG लिंक पर हमेशा sizes घोषित करें और पक्का करें कि वह असली पिक्सेल आयामों से मेल खाता हो। 32x32 के लेबल वाली फ़ाइल, जो असल में 64x64 है, असंगत परिणाम देती है।

3. आक्रामक कैशिंग

ब्राउज़र फ़ेविकॉन को लंबे समय तक कैश करते हैं, अक्सर पेज कैश से स्वतंत्र रूप से। रीब्रांड के बाद पुराना आइकन कई दिनों तक टिका रह सकता है। फ़ाइल का नाम बदलें या वर्ज़न क्वेरी स्ट्रिंग (/favicon.ico?v=2) जोड़ें और लिंक टैग अपडेट करें। हार्ड रीलोड से अक्सर टैब आइकन रिफ़्रेश नहीं होता; आइकन URL को सीधे खोलकर रीलोड करना आमतौर पर काम करता है।

4. गैर-वर्गाकार छवियाँ

फ़ेविकॉन वर्गाकार होने चाहिए। आयताकार लोगो अनिश्चित ढंग से खिंच जाता है, कट जाता है या उसमें खाली पट्टियाँ आ जाती हैं। चौड़े वर्डमार्क को छोटा करने के बजाय एक समर्पित वर्गाकार चिह्न डिज़ाइन करें, जैसे कोई आद्याक्षर या प्रतीक।

5. पारदर्शी Apple touch icon का काला पड़ जाना

iOS पारदर्शिता को काले रंग से भर देता है। 180x180 आइकन को अपारदर्शी बैकग्राउंड दें और कोनों को पहले से गोल न करें।

6. सेफ़ ज़ोन के बिना maskable आइकन

अगर लोगो maskable आइकन के किनारों को छूता है, तो Android उसे काट देगा। उसे बीच के 80% वृत्त के अंदर रखें और पूरे कैनवास को बैकग्राउंड रंग से भरें।

7. क्रॉलर से आइकन को ब्लॉक करना

अगर robots.txt आपके फ़ेविकॉन पाथ को disallow करता है, तो Google उसे फ़ेच नहीं कर सकता और खोज परिणामों में एक सामान्य ग्लोब आइकन दिखाएगा। यह भी याद रखें कि Google को फ़ेविकॉन पेज के उसी होस्ट पर चाहिए और वह उसे केवल कभी-कभार रिफ़्रेश करता है, इसलिए बदलाव दिखने में दिन या हफ़्ते लग सकते हैं।

8. मैनिफ़ेस्ट लिंक या purpose भूल जाना

जो मैनिफ़ेस्ट लिंक नहीं किया गया है, या जिसमें 192 और 512 px आइकन नहीं हैं, वह Chrome में इंस्टॉल प्रॉम्प्ट को रोक देता है। अपने ब्राउज़र के डेवलपर टूल में Application टैब के तहत इसे वैलिडेट करें।

पूरा सेट एक क्लिक में बनाएँ

इमेज एडिटर में हाथ से दर्जनों फ़ाइलें बनाना, फिर ICO में बदलना और मैनिफ़ेस्ट लिखना थकाऊ और गलतियों से भरा काम है। MakeFav एक ही इमेज, टेक्स्ट या इमोजी से ऊपर की सभी फ़ाइलें बना देता है: मल्टी-साइज़ favicon.ico, PNG, SVG, Apple touch icon, 192/512 PNG, एक maskable आइकन, Windows टाइल, manifest.json और browserconfig.xml, साथ में पेस्ट करने के लिए तैयार HTML स्निपेट, सब एक ZIP डाउनलोड में। आप एडिटर में बैकग्राउंड, पैडिंग और आकार को बारीकी से ट्यून कर सकते हैं, फ़ेविकॉन चेकर से किसी मौजूदा साइट को जाँच सकते हैं, और डेवलपर संसाधनों के ज़रिए जनरेशन को स्वचालित कर सकते हैं।

डिप्लॉयमेंट चेकलिस्ट

1. सभी फ़ाइलें अपनी साइट के रूट में अपलोड करें।
2. HTML स्निपेट को हर पेज के (या अपने साझा लेआउट के) <head> में पेस्ट करें।
3. पक्का करें कि पाथ रूट-रिलेटिव हैं और HTTP 200 लौटाते हैं।
4. लाइट और डार्क मोड, iOS होम-स्क्रीन इंस्टॉल और Android इंस्टॉल जाँचें।
5. छूटे हुए या बेमेल साइज़ पकड़ने के लिए चेकर चलाएँ।
6. अगर आपने पुराना आइकन बदला है, तो वर्ज़न स्ट्रिंग से कैश तोड़ें।

अक्सर पूछे जाने वाले प्रश्न

क्या 2026 में भी मुझे favicon.ico चाहिए?

हाँ। हालाँकि आधुनिक ब्राउज़र PNG और SVG स्वीकार करते हैं, कई क्रॉलर, फ़ीड रीडर, ईमेल क्लाइंट और पुराने ब्राउज़र आज भी सीधे /favicon.ico माँगते हैं। 16, 32 और 48 px छवियों वाली मल्टी-साइज़ ICO एक छोटी फ़ाइल है जो आइकन के गायब होने और 404 त्रुटियों को रोकती है।

Google Search के लिए फ़ेविकॉन का साइज़ क्या होना चाहिए?

Google ऐसा वर्गाकार फ़ेविकॉन चाहता है जिसका साइज़ 48 px का गुणज हो, कम से कम 48x48। 96x96 PNG एक सुरक्षित विकल्प है, और SVG भी सपोर्टेड है। Google को फ़ाइल का क्रॉल होना भी ज़रूरी है, इसलिए उसे robots.txt में ब्लॉक न करें। अपडेट दिखने में दिन या हफ़्ते लग सकते हैं।

क्या Apple touch icon के लिए 180x180 काफ़ी है?

लगभग सभी साइटों के लिए, हाँ। iOS और iPadOS हर मौजूदा डिवाइस के लिए 180x180 PNG को छोटा कर लेते हैं। पुराने साइज़ (57 से 152 px) केवल बहुत पुराने iOS संस्करणों के लिए मायने रखते हैं। अपारदर्शी बैकग्राउंड इस्तेमाल करना याद रखें ताकि आइकन काला न पड़े।

Maskable आइकन क्या है और क्या मुझे इसकी ज़रूरत है?

Maskable आइकन एक 512x512 PNG है जो Android के अडैप्टिव आइकन आकारों के लिए डिज़ाइन किया गया है। इसकी ज़रूरी सामग्री केंद्र में 80% व्यास वाले वृत्त के भीतर रहती है, और बैकग्राउंड पूरे वर्ग को भरता है। आपको इसकी ज़रूरत केवल तभी है जब आप इंस्टॉल योग्य PWA देते हैं, पर यह आइकन को सफ़ेद वृत्त में बैठने के बजाय नेटिव जैसा दिखाता है।

बदलने के बाद भी मेरा पुराना फ़ेविकॉन क्यों दिख रहा है?

ब्राउज़र फ़ेविकॉन को अलग से और लंबे समय के लिए कैश करते हैं। फ़ाइल का नाम बदलें या ?v=2 जैसी वर्ज़न क्वेरी स्ट्रिंग जोड़ें, लिंक टैग अपडेट करें, और फिर आइकन URL को सीधे खोलकर रीलोड करें। सर्च इंजनों को अपनी प्रति रिफ़्रेश करने में ज़्यादा समय लग सकता है।