در سال 2026 به چه اندازه‌هایی از فاوآیکون نیاز دارید؟ مجموعه ایده‌آل

در سال 2026 مجموعه ایده‌آل فاوآیکون این است: یک favicon.ico شامل تصاویر 16، 32 و 48 پیکسلی، یک PNG با اندازه 96x96 (برای جستجوی گوگل)، یک فاوآیکون SVG اختیاری، یک apple-touch-icon.png با اندازه 180x180 و فایل‌های PNG با اندازه 192x192 و 512x512 (به‌علاوه یک نسخه maskable با اندازه 512) که در web app manifest تعریف می‌شوند. کاشی‌های ویندوز و اندازه‌های قدیمی اپل فقط زمانی لازم‌اند که مجبور باشید از دستگاه‌های بسیار قدیمی پشتیبانی کنید. در ادامه دلیل همه این‌ها را همراه با جدول اندازه‌ها، HTML آماده‌ی استفاده و اشتباهات رایج توضیح می‌دهیم.

وضعیت فاوآیکون‌ها قبلاً آشفته بود: هر مرورگر و هر سیستم‌عامل اندازه‌ی خاص خودش را می‌خواست و نتیجه‌اش بلوک‌های بدنام 20 خطی <head> بود. امروز بیشتر آن‌ها منسوخ شده‌اند. مرورگرهای مدرن یک آیکون خوب را مقیاس می‌دهند، iOS فقط یک اندازه می‌خواهد و اندروید از manifest می‌خواند. این مقاله آنچه واقعاً لازم است را از چیزهایی که فقط خوب است داشته باشید جدا می‌کند.

پاسخ کوتاه: مجموعه ایده‌آل فایل‌های فاوآیکون

• favicon.ico (اندازه‌های 16، 32 و 48 پیکسل در یک فایل) در ریشه‌ی سایت. مرورگرها، فیدخوان‌ها و بسیاری از ابزارها هنوز به‌طور خودکار /favicon.ico را درخواست می‌کنند.
• favicon.svg (اختیاری اما توصیه‌شده) برای نمایش شفاف در هر اندازه و پشتیبانی از حالت تاریک.
• PNG با اندازه‌های 16x16، 32x32 و 96x96 به‌عنوان جایگزین‌های صریح. نسخه‌ی 96 پیکسلی به جستجوی گوگل کمک می‌کند که اندازه‌ای مضرب 48 پیکسل می‌خواهد.
• apple-touch-icon.png با اندازه 180x180، مات و بدون شفافیت.
• PNG با اندازه 192x192 و 512x512 در manifest.json، به‌علاوه یک آیکون maskable با اندازه 512x512 برای اندروید.
• متاتگ theme-color برای رنگ‌دهی رابط مرورگر در موبایل.
• کاشی‌های ویندوز (70، 150 و 310 پیکسل) همراه با browserconfig.xml فقط برای ویندوز قدیمی و سایت‌های پین‌شده در IE11.

جدول اندازه‌های فاوآیکون: کاربرد، نام فایل و اولویت

از این جدول به‌عنوان چک‌لیست استفاده کنید. «ضروری» یعنی یک سایت معمولی بدون آن ناقص یا نیمه‌کاره به نظر می‌رسد؛ «توصیه‌شده» یعنی بهبود کیفیت آشکار؛ «اختیاری» یعنی کاربرد خاص یا قدیمی.

favicon.ico: اندازه‌های 16، 32 و 48 پیکسل در یک فایل

فایل ICO یک ظرف است که چند تصویر بیت‌مپ را در خود نگه می‌دارد. یک favicon.ico خوب شامل تصاویر 16x16، 32x32 و 48x48 است تا مرورگر یا سیستم‌عامل نزدیک‌ترین گزینه را انتخاب کند. آن را در ریشه‌ی دامنه‌ی خود قرار دهید (https://example.com/favicon.ico). حتی اگر HTML شما به جای دیگری اشاره کند، بسیاری از خزنده‌ها، فیدخوان‌های RSS و مرورگرهای قدیمی همچنان همین نشانی دقیق را درخواست می‌کنند؛ بنابراین وجود آن از ثبت خطاهای 404 در لاگ‌های شما جلوگیری می‌کند.

پسوند یک فایل PNG را صرفاً به .ico تغییر ندهید. بیشتر مرورگرها آن را تحمل می‌کنند، اما برخی ابزارها آن را رد می‌کنند و مزیت چندرزولوشنی را از دست می‌دهید. یک ICO واقعی خروجی بگیرید.

فاوآیکون‌های PNG: اندازه‌های 16، 32 و 96 پیکسل

لینک‌های PNG با ویژگی صریح sizes به مرورگر اجازه می‌دهند بدون پردازش ICO بهترین بیت‌مپ را انتخاب کند. در عمل 32x32 تب‌های با تراکم بالا را پوشش می‌دهد و 16x16 امروز تقریباً زائد است. اندازه‌ی 96x96 ارزش افزودن دارد، چون گوگل فاوآیکون‌ها را کنار نتایج نمایش می‌دهد و یک آیکون مربع می‌خواهد که اندازه‌اش مضرب 48 پیکسل باشد (48x48، 96x96، 144x144 و مانند آن). وقتی گوگل برای نتایج موبایل تصویر را کوچک می‌کند، فایل 96 پیکسلی منبع شفاف‌تری از فایل 48 پیکسلی در اختیارش می‌گذارد.

نکته‌ی طراحی: در 16 پیکسل جزئیات ظریف از بین می‌رود. از یک شکل ساده و پررنگ، کنتراست بالا و متن کم یا بدون متن استفاده کنید. پیش از خروجی گرفتن می‌توانید آیکون خود را در ویرایشگر MakeFav تنظیم و پیش‌نمایش کنید.

فاوآیکون SVG و حالت تاریک

فاوآیکون SVG یک فایل کوچک واحد است که روی هر تراکم صفحه‌نمایشی شفاف می‌ماند. مرورگرهای مبتنی بر کرومیوم و فایرفاکس از آن پشتیبانی می‌کنند. پشتیبانی سافاری از قدیم محدود بوده است، پس هرگز فقط به 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>

توجه کنید که این media query تم مرورگر یا سیستم‌عامل را منعکس می‌کند که نوار تب از آن استفاده می‌کند. از دکمه‌ی تغییر تم در وب‌سایت خودتان پیروی نمی‌کند.

یک نکته‌ی شناخته‌شده: وقتی هم ICO و هم SVG فهرست شده باشند، ممکن است کروم ICO را انتخاب کند. اگر ICO را با sizes="32x32" تعریف کنید و SVG را بعد از آن بیاورید، کروم SVG را ترجیح می‌دهد، همان‌طور که در کد زیر نشان داده شده است.

Apple touch icon: اندازه‌ی 180x180 و اندازه‌های قدیمی

وقتی کاربر سایت شما را به صفحه‌ی اصلی iOS یا iPadOS اضافه می‌کند، سافاری از apple-touch-icon استفاده می‌کند. امروز یک PNG با اندازه 180x180 پیکسل کافی است: iOS آن را برای دستگاه‌های قدیمی‌تر و آیپدها کوچک می‌کند. نام آن را apple-touch-icon.png بگذارید و در ریشه قرار دهید؛ iOS حتی اگر تگ لینکی وجود نداشته باشد، به‌طور پیش‌فرض دنبال همین فایل می‌گردد.

قواعد آیکون اپل:

• بدون شفافیت. iOS پیکسل‌های شفاف را با رنگ سیاه پر می‌کند، بنابراین یک لوگوی شفاف اغلب به یک لکه‌ی سیاه تبدیل می‌شود. یک رنگ پس‌زمینه‌ی یکدست اضافه کنید.
• بدون گوشه‌های گرد. iOS ماسک گرد خودش را اعمال می‌کند. یک مربع کامل ارائه دهید.
• محتوای مهم را از لبه‌ها دور نگه دارید، چون گوشه‌ها بریده می‌شوند.

چه زمانی به اندازه‌های قدیمی (57، 72، 76، 114، 120، 144، 152 و 167) نیاز دارید؟ فقط اگر از iOS 6 یا قدیمی‌تر پشتیبانی می‌کنید، یا می‌خواهید برای آیپد پرو (167 پیکسل) و آیپد (152 پیکسل) کنترل دقیق پیکسلی داشته باشید. برای تقریباً هر سایتی در 2026، فقط فایل 180x180 کافی است. در تنظیمات حداکثر سازگاری زیر برای کامل بودن چند مورد از آن‌ها آمده است.

آیکون‌های اندروید و PWA: اندازه‌های 192، 512 و maskable

کروم در اندروید و دیگر مرورگرهای سازگار با PWA آیکون‌ها را از web app manifest می‌خوانند، نه از <link rel="icon">. برای قابل‌نصب بودن حداقل به یک PNG با اندازه 192x192 و یکی با اندازه 512x512 نیاز دارید. آیکون 192 پیکسلی در صفحه‌ی اصلی و لانچر برنامه‌ها استفاده می‌شود؛ آیکون 512 پیکسلی در صفحه‌های اسپلش و پنجره‌های نصب ظاهر می‌شود.

آیکون‌های maskable و ناحیه‌ی امن

آیکون‌های تطبیقی اندروید بسته به دستگاه می‌توانند به شکل دایره، squircle یا شکل‌های دیگر بریده شوند. آیکون maskable طوری طراحی می‌شود که بتوان آن را با امنیت برید: محتوای مهم باید درون ناحیه‌ی امن، یعنی یک دایره‌ی مرکزی با قطر 80% تصویر قرار گیرد (شعاع برابر 40% ضلع). برای یک فایل 512x512 یعنی لوگوی خود را درون دایره‌ای به قطر حدود 410 پیکسل نگه دارید و رنگ پس‌زمینه را تا هر چهار لبه ادامه دهید تا پس از ماسک شدن فاصله‌ای دیده نشود.

آیکون 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 می‌گذارند؛ نام مهم نیست، لینک مهم است.

کاشی‌های ویندوز و browserconfig.xml

ویندوز 8.1 و 10 به کاربران اجازه می‌دهند سایتی را به منوی استارت پین کنند و IE11 و Edge قدیمی تصاویر کاشی را از browserconfig.xml می‌خوانند. اندازه‌های معمول 70x70 (کوچک)، 150x150 (متوسط)، 310x150 (عریض) و 310x310 (بزرگ) هستند. Edge مبتنی بر کرومیوم به جای آن از manifest و فاوآیکون‌های معمولی استفاده می‌کند، پس این یک قابلیت قدیمی است. فقط در صورتی آن را بگنجانید که مخاطبان شما هنوز شامل کاربران ویندوزهای قدیمی‌تر باشند، مثلاً در محیط‌های سازمانی.

<?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: رنگ‌دهی رابط مرورگر

متاتگ 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) و دو آیکون manifest (192 و 512). اگر دیده‌شدن در جستجوی گوگل برایتان مهم است PNG با اندازه 96x96 را اضافه کنید و اگر 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، اندازه‌های قدیمی اپل، کاشی‌های ویندوز و رنگ‌های تم را اضافه می‌کند.

<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" نسبت به نشانی فعلی تفسیر می‌شود، بنابراین در / کار می‌کند اما در /blog/post/ از کار می‌افتد. از نشانی‌های نسبت‌به‌ریشه (/favicon.ico) یا مطلق استفاده کنید. همچنین مطمئن شوید فایل‌ها واقعاً وجود دارند: هر نشانی را مستقیماً در مرورگر باز کنید و مطمئن شوید HTTP 200 برمی‌گرداند، نه ریدایرکت به صفحه‌ی 404 یا صفحه‌ی ورود.

2. نبود یا نادرست بودن ویژگی sizes

بدون sizes، مرورگرها باید آیکون‌ها را دانلود کنند تا بررسی‌شان کنند و ممکن است گزینه‌ی نادرست را انتخاب کنند. همیشه sizes را روی لینک‌های PNG تعریف کنید و مطمئن شوید با ابعاد واقعی پیکسلی مطابقت دارد. فایلی که با برچسب 32x32 است اما در واقع 64x64 است نتایج ناسازگار ایجاد می‌کند.

3. کش شدید

مرورگرها فاوآیکون‌ها را مدت زیادی و اغلب مستقل از کش صفحه نگه می‌دارند. پس از تغییر برند ممکن است آیکون قدیمی روزها باقی بماند. نام فایل را تغییر دهید یا یک query string نسخه اضافه کنید (/favicon.ico?v=2) و تگ‌های لینک را به‌روز کنید. بارگذاری مجدد کامل اغلب آیکون تب را تازه نمی‌کند؛ باز کردن مستقیم نشانی آیکون و بارگذاری مجدد آن معمولاً جواب می‌دهد.

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

فاوآیکون‌ها باید مربع باشند. یک لوگوی مستطیلی به‌شکلی غیرقابل‌پیش‌بینی کشیده، بریده یا با حاشیه نمایش داده می‌شود. به‌جای کوچک کردن یک لوگوتایپ عریض، یک نشان مربع اختصاصی مانند حرف اول یا یک نماد طراحی کنید.

5. تبدیل شدن Apple touch icon شفاف به سیاه

iOS شفافیت را با سیاه پر می‌کند. به آیکون 180x180 پس‌زمینه‌ی مات بدهید و گوشه‌ها را از پیش گرد نکنید.

6. آیکون‌های maskable بدون ناحیه‌ی امن

اگر لوگو به لبه‌های آیکون maskable برسد، اندروید آن را می‌برد. آن را درون دایره‌ی مرکزی 80% نگه دارید و کل بوم را با رنگ پس‌زمینه پر کنید.

7. مسدود کردن آیکون‌ها برای خزنده‌ها

اگر robots.txt مسیر فاوآیکون شما را disallow کند، گوگل نمی‌تواند آن را دریافت کند و در نتایج جستجو یک آیکون کره‌ی زمین عمومی نشان می‌دهد. همچنین به یاد داشته باشید که گوگل فاوآیکون را روی همان میزبان صفحه می‌خواهد و فقط گاهی آن را تازه می‌کند، بنابراین ممکن است تغییرات روزها یا هفته‌ها طول بکشد تا ظاهر شوند.

8. فراموش کردن لینک manifest یا purposeها

manifest که لینک نشده باشد یا آیکون‌های 192 و 512 پیکسلی نداشته باشد، مانع نمایش پیام نصب در کروم می‌شود. آن را در ابزارهای توسعه‌دهنده‌ی مرورگر، در زبانه‌ی Application اعتبارسنجی کنید.

کل مجموعه را با یک کلیک بسازید

ساختن ده‌ها فایل با دست در یک ویرایشگر تصویر، سپس تبدیل به ICO و نوشتن manifest، خسته‌کننده و مستعد خطاست. MakeFav همه‌ی فایل‌های بالا را از یک تصویر، متن یا ایموجی می‌سازد: favicon.ico چنداندازه‌ای، PNGها، SVG، Apple touch icon، PNGهای 192 و 512، یک آیکون maskable، کاشی‌های ویندوز، manifest.json و browserconfig.xml، به‌علاوه یک قطعه‌ی HTML آماده‌ی چسباندن، همه در یک دانلود ZIP. می‌توانید پس‌زمینه، حاشیه و شکل را در ویرایشگر دقیق تنظیم کنید، سایت موجود را با بررسی‌گر فاوآیکون بررسی کنید و تولید را از طریق منابع توسعه‌دهندگان خودکار کنید.

چک‌لیست استقرار

1. همه‌ی فایل‌ها را در ریشه‌ی سایت خود آپلود کنید.
2. قطعه‌ی HTML را در <head> هر صفحه (یا قالب مشترک خود) بچسبانید.
3. مطمئن شوید مسیرها نسبت‌به‌ریشه هستند و HTTP 200 برمی‌گردانند.
4. حالت روشن و تاریک، نصب روی صفحه‌ی اصلی iOS و نصب در اندروید را بررسی کنید.
5. بررسی‌گر را اجرا کنید تا اندازه‌های ازدست‌رفته یا نامطابق را بیابد.
6. اگر آیکون قدیمی را جایگزین کرده‌اید، با یک رشته‌ی نسخه کش را دور بزنید.

پرسش‌های متداول

آیا در 2026 هنوز به favicon.ico نیاز دارم؟

بله. هرچند مرورگرهای مدرن PNG و SVG را می‌پذیرند، بسیاری از خزنده‌ها، فیدخوان‌ها، کلاینت‌های ایمیل و مرورگرهای قدیمی‌تر هنوز مستقیماً /favicon.ico را درخواست می‌کنند. یک ICO چنداندازه‌ای با تصاویر 16، 32 و 48 پیکسلی فایلی کوچک است که از نبود آیکون و خطاهای 404 جلوگیری می‌کند.

فاوآیکون برای جستجوی گوگل چه اندازه‌ای باید باشد؟

گوگل یک فاوآیکون مربع می‌خواهد که اندازه‌اش مضرب 48 پیکسل باشد و دست‌کم 48x48 باشد. یک PNG با اندازه 96x96 انتخاب امنی است و SVG نیز پشتیبانی می‌شود. گوگل همچنین لازم دارد فایل قابل خزش باشد، پس آن را در robots.txt مسدود نکنید. ظاهر شدن به‌روزرسانی‌ها ممکن است روزها یا هفته‌ها طول بکشد.

آیا 180x180 برای Apple touch icon کافی است؟

برای تقریباً همه‌ی سایت‌ها بله. iOS و iPadOS یک PNG با اندازه 180x180 را برای همه‌ی دستگاه‌های فعلی کوچک می‌کنند. اندازه‌های قدیمی‌تر (57 تا 152 پیکسل) فقط برای نسخه‌های بسیار قدیمی iOS اهمیت دارند. به یاد داشته باشید از پس‌زمینه‌ی مات استفاده کنید تا آیکون سیاه نشود.

آیکون maskable چیست و آیا به آن نیاز دارم؟

آیکون maskable یک PNG با اندازه 512x512 است که برای شکل‌های آیکون تطبیقی اندروید طراحی شده است. محتوای مهم آن درون دایره‌ای با قطر 80% در مرکز قرار می‌گیرد و پس‌زمینه کل مربع را پر می‌کند. فقط در صورتی به آن نیاز دارید که یک PWA قابل‌نصب ارائه می‌دهید، اما باعث می‌شود آیکون بومی به نظر برسد و درون یک دایره‌ی سفید ننشیند.

چرا بعد از تغییر، فاوآیکون قدیمی من هنوز نمایش داده می‌شود؟

مرورگرها فاوآیکون‌ها را جداگانه و مدت زیادی کش می‌کنند. نام فایل را عوض کنید یا یک query string نسخه مانند ?v=2 اضافه کنید، تگ‌های لینک را به‌روز کنید و سپس نشانی آیکون را مستقیماً باز و بارگذاری مجدد کنید. موتورهای جستجو ممکن است برای تازه‌سازی نسخه‌ی خودشان زمان بیشتری لازم داشته باشند.