2026 میں آپ کو کون سے فیویکون سائز درکار ہیں؟ مثالی سیٹ

2026 میں مثالی فیویکون سیٹ یہ ہے: ایک favicon.ico جس میں 16، 32 اور 48 px کی تصاویر شامل ہوں، ایک 96x96 PNG (گوگل سرچ کے لیے)، ایک اختیاری 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 ورژن گوگل سرچ کے لیے مفید ہے، جسے 48 px کا ضرب درکار ہوتا ہے۔
• apple-touch-icon.png 180x180 پر، ٹھوس (opaque) اور بغیر شفافیت کے۔
• 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 سائز شامل کرنا فائدہ مند ہے کیونکہ گوگل سرچ نتائج کے ساتھ فیویکون دکھاتا ہے اور ایسا مربع آئیکن چاہتا ہے جس کا سائز 48 px کا ضرب ہو (48x48، 96x96، 144x144 وغیرہ)۔ موبائل نتائج کے لیے ڈاؤن سیمپل کرتے وقت 96 px کی فائل گوگل کو 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 اسے پرانے آلات اور iPads کے لیے خود چھوٹا کر لیتا ہے۔ اس کا نام 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 کے adaptive آئیکنز آلے کے مطابق دائرے، 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)۔ اگر گوگل سرچ میں نظر آنا اہم ہے تو 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) یا مکمل URLs استعمال کریں۔ یہ بھی جانچیں کہ فائلیں واقعی موجود ہیں: ہر URL براؤزر میں براہِ راست کھولیں اور یقینی بنائیں کہ وہ HTTP 200 لوٹاتا ہے، نہ کہ 404 صفحے یا لاگ اِن دیوار پر ری ڈائریکٹ۔

2. sizes ایٹریبیوٹ غائب یا غلط

sizes کے بغیر براؤزرز کو آئیکنز جانچنے کے لیے انہیں ڈاؤن لوڈ کرنا پڑتا ہے، اور وہ غلط آئیکن بھی چن سکتے ہیں۔ PNG لنکس پر ہمیشہ sizes ڈکلیئر کریں اور یقینی بنائیں کہ یہ اصل پکسل ڈائمینشنز سے میل کھاتا ہو۔ 32x32 کا لیبل لگی ایسی فائل جو دراصل 64x64 ہو، غیر مستقل نتائج پیدا کرتی ہے۔

3. جارحانہ کیشنگ

براؤزرز فیویکون کو طویل عرصے تک کیش کرتے ہیں، اکثر صفحے کی کیش سے آزادانہ طور پر۔ ری برانڈ کے بعد پرانا آئیکن کئی دن تک رہ سکتا ہے۔ فائل کا نام بدلیں یا ورژن کوئری اسٹرنگ شامل کریں (/favicon.ico?v=2) اور لنک ٹیگز اپ ڈیٹ کریں۔ ہارڈ ری لوڈ اکثر ٹیب آئیکن کو ریفریش نہیں کرتا؛ آئیکن کا URL براہِ راست کھول کر ری لوڈ کرنا عموماً کام کرتا ہے۔

4. غیر مربع تصاویر

فیویکون مربع ہونے چاہییں۔ مستطیل لوگو غیر متوقع طور پر کھنچ جاتا ہے، کٹ جاتا ہے یا اس کے گرد خالی پٹیاں آ جاتی ہیں۔ چوڑے وارڈ مارک کو چھوٹا کرنے کے بجائے ایک مخصوص مربع نشان ڈیزائن کریں، جیسے کوئی ابتدائی حرف یا علامت۔

5. شفاف Apple touch icons کا سیاہ ہو جانا

iOS شفافیت کو سیاہ سے بھر دیتا ہے۔ 180x180 آئیکن کو ٹھوس بیک گراؤنڈ دیں اور کونوں کو پہلے سے گول نہ کریں۔

6. سیف زون کے بغیر maskable آئیکنز

اگر لوگو maskable آئیکن کے کناروں کو چھوتا ہے تو Android اسے کاٹ دے گا۔ اسے مرکزی 80% دائرے کے اندر رکھیں اور پورے کینوس کو بیک گراؤنڈ رنگ سے بھر دیں۔

7. کرالرز سے آئیکنز کو بلاک کرنا

اگر robots.txt آپ کے فیویکون پاتھ کو disallow کرتی ہے تو گوگل اسے حاصل نہیں کر سکتا اور سرچ نتائج میں عمومی گلوب آئیکن دکھائے گا۔ یہ بھی یاد رکھیں کہ گوگل کو فیویکون صفحے کے اسی ہوسٹ پر چاہیے اور وہ اسے صرف کبھی کبھار ریفریش کرتا ہے، اس لیے تبدیلیاں ظاہر ہونے میں دن یا ہفتے لگ سکتے ہیں۔

8. مینی فیسٹ لنک یا purposes بھول جانا

وہ مینی فیسٹ جو لنک نہ ہو، یا جس میں 192 اور 512 px آئیکنز نہ ہوں، Chrome میں انسٹال پرامپٹ کو روک دیتا ہے۔ اسے اپنے براؤزر کے ڈیولپر ٹولز میں Application ٹیب کے تحت جانچیں۔

پورا سیٹ ایک کلک میں بنائیں

امیج ایڈیٹر میں درجن بھر فائلیں ہاتھ سے بنانا، پھر انہیں ICO میں بدلنا اور مینی فیسٹ لکھنا تھکا دینے والا اور غلطیوں کا شکار کام ہے۔ MakeFav ایک ہی تصویر، متن یا ایموجی سے اوپر بیان کی گئی تمام فائلیں بناتا ہے: ملٹی سائز favicon.ico، PNGs، SVG، Apple touch icon، 192/512 PNGs، ایک 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 غلطیوں کو روکتی ہے۔

گوگل سرچ کے لیے فیویکون کا سائز کیا ہونا چاہیے؟

گوگل ایسا مربع فیویکون چاہتا ہے جس کا سائز 48 px کا ضرب ہو، کم از کم 48x48۔ 96x96 PNG محفوظ انتخاب ہے، اور SVG بھی سپورٹڈ ہے۔ گوگل کو یہ بھی چاہیے کہ فائل کرال ہو سکے، اس لیے اسے robots.txt میں بلاک نہ کریں۔ اپ ڈیٹس ظاہر ہونے میں دن یا ہفتے لگ سکتے ہیں۔

کیا Apple touch icon کے لیے 180x180 کافی ہے؟

تقریباً تمام سائٹس کے لیے، جی ہاں۔ iOS اور iPadOS ہر موجودہ آلے کے لیے 180x180 PNG کو چھوٹا کر لیتے ہیں۔ پرانے سائز (57 سے 152 px) صرف iOS کے بہت پرانے ورژنز کے لیے اہم ہیں۔ ٹھوس بیک گراؤنڈ استعمال کرنا یاد رکھیں تاکہ آئیکن سیاہ نہ ہو جائے۔

Maskable آئیکن کیا ہے اور کیا مجھے اس کی ضرورت ہے؟

Maskable آئیکن ایک 512x512 PNG ہے جو Android کی adaptive آئیکن شکلوں کے لیے ڈیزائن کیا جاتا ہے۔ اس کا اہم مواد مرکز میں 80% قطر کے دائرے کے اندر ہوتا ہے، اور بیک گراؤنڈ پورے مربع کو بھر دیتا ہے۔ آپ کو اس کی ضرورت صرف تب ہے جب آپ انسٹال ہونے والا PWA پیش کریں، لیکن یہ آئیکن کو سفید دائرے میں بیٹھے ہونے کے بجائے نیٹو جیسا دکھاتا ہے۔

تبدیل کرنے کے بعد بھی میرا پرانا فیویکون کیوں نظر آ رہا ہے؟

براؤزر فیویکون کو الگ سے اور طویل عرصے کے لیے کیش کرتے ہیں۔ فائل کا نام بدلیں یا ?v=2 جیسی ورژن کوئری اسٹرنگ شامل کریں، لنک ٹیگز اپ ڈیٹ کریں، پھر آئیکن کا URL براہِ راست کھول کر ری لوڈ کریں۔ سرچ انجنوں کو اپنی کاپی ریفریش کرنے میں زیادہ وقت لگ سکتا ہے۔