2026 मध्ये तुम्हाला कोणत्या फेविकॉन साइझची गरज आहे? आदर्श सेट

2026 मधील आदर्श फेविकॉन सेट म्हणजे मल्टी-साइझ favicon.ico (16, 32, 48 px), एक SVG, 180x180 Apple touch icon आणि 192/512 px PWA आयकॉन. या मार्गदर्शकात तुम्हाला साइझची संपूर्ण सारणी, कॉपी-पेस्ट HTML आणि manifest.json मिळेल.

Tomáš Rohlena 11 मिनिटांचे वाचन

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 पिन केलेल्या साइट्ससाठी.

फेविकॉन साइझ सारणी: उद्देश, फाइल नावे आणि प्राधान्य

ही सारणी चेकलिस्ट म्हणून वापरा. "Required" म्हणजे त्याशिवाय सामान्य साइट बिघडलेली किंवा अपूर्ण दिसेल; "Recommended" म्हणजे गुणवत्तेत स्पष्ट सुधारणा; "Optional" म्हणजे खास किंवा जुन्या वापरासाठी.

साइझ फॉरमॅट सामान्य फाइल नाव उद्देश प्राधान्य
16, 32, 48 px ICO (मल्टी-इमेज) favicon.ico ब्राउझर टॅब, बुकमार्क, डीफॉल्ट /favicon.ico विनंती, जुने क्लायंट आवश्यक
16x16 PNG favicon-16x16.png 1x स्क्रीनवरील मानक टॅब आयकॉन पर्यायी (ICO मध्ये समाविष्ट)
32x32 PNG favicon-32x32.png हाय-DPI स्क्रीनवरील टॅब आयकॉन, टास्कबार शॉर्टकट शिफारस केलेले
96x96 PNG favicon-96x96.png Google Search निकाल (48 px चा गुणाकार), काही डेस्कटॉप शॉर्टकट शिफारस केलेले
स्केलेबल SVG favicon.svg कोणत्याही साइझमध्ये तीक्ष्ण आयकॉन, prefers-color-scheme द्वारे डार्क मोड पर्यायी (शिफारस केलेले)
180x180 PNG apple-touch-icon.png iOS आणि iPadOS होम स्क्रीन, Safari फेव्हरेट्स आणि शेअर शीट आवश्यक
57, 60, 72, 76, 114, 120, 144, 152, 167 PNG apple-touch-icon-152x152.png इत्यादी जुन्या iOS आवृत्त्या आणि जुने iPad पर्यायी (जुने)
192x192 PNG web-app-manifest-192x192.png Android होम स्क्रीन, Chrome इन्स्टॉल प्रॉम्प्ट PWA साठी आवश्यक
512x512 PNG web-app-manifest-512x512.png PWA स्प्लॅश स्क्रीन, स्टोअर लिस्टिंग, इन्स्टॉल डायलॉग PWA साठी आवश्यक
512x512 (maskable) PNG maskable-512x512.png Android अ‍ॅडाप्टिव्ह आयकॉन आकार (वर्तुळ, squircle) PWA साठी शिफारस केलेले
70x70, 150x150, 310x150, 310x310 PNG mstile-150x150.png इत्यादी browserconfig.xml द्वारे Windows स्टार्ट मेनू टाइल्स पर्यायी (जुने)

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. चौरस नसलेल्या इमेज

फेविकॉन चौरस असले पाहिजेत. आयताकृती लोगो अनिश्चितपणे ताणला जातो, कापला जातो किंवा letterbox होतो. रुंद वर्डमार्क लहान करण्याऐवजी आद्याक्षर किंवा चिन्हासारखे स्वतंत्र चौरस मार्क डिझाइन करा.

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 आयकॉन हा Android च्या अ‍ॅडाप्टिव्ह आयकॉन आकारांसाठी डिझाइन केलेला 512x512 PNG आहे. त्याचा महत्त्वाचा मजकूर मध्यभागी 80% व्यासाच्या वर्तुळात असतो आणि बॅकग्राउंड संपूर्ण चौरस भरते. तुम्ही इन्स्टॉल करण्यायोग्य PWA देत असाल तरच तो लागतो, पण त्यामुळे आयकॉन पांढऱ्या वर्तुळात बसल्यासारखा न दिसता नेटिव्ह दिसतो.

मी बदलल्यानंतरही माझा जुना फेविकॉन का दिसतो?

ब्राउझर फेविकॉन स्वतंत्रपणे आणि दीर्घकाळ कॅश करतात. फाइलचे नाव बदला किंवा ?v=2 सारखी व्हर्जन क्वेरी स्ट्रिंग जोडा, लिंक टॅग अपडेट करा आणि मग आयकॉन URL थेट उघडून रीलोड करा. शोध इंजिनांना त्यांची स्वतःची प्रत रिफ्रेश करायला जास्त वेळ लागू शकतो.

संबंधित लेख

काही सेकंदांत तुमचा favicon तयार करा

ICO, Apple, Android आणि PWA आयकॉनसह मोफत favicon जनरेटर.

जनरेटर उघडा