ما أحجام الفافيكون التي تحتاجها في 2026؟ المجموعة المثالية

في 2026 تتألف المجموعة المثالية للفافيكون من: ملف favicon.ico يحتوي على صور بأحجام 16 و32 و48 بكسل، وملف PNG بحجم 96x96 (لبحث Google)، وفافيكون SVG اختياري، وملف apple-touch-icon.png بحجم 180x180، وملفي PNG بحجم 192x192 و512x512 (إضافةً إلى نسخة 512 قابلة للقناع maskable) يتم التصريح عنها في ملف manifest لتطبيق الويب. أما بلاطات Windows وأحجام Apple القديمة فلا تلزم إلا إذا كنت مضطراً إلى دعم أجهزة قديمة جداً. يشرح ما يلي السبب، مع جدول للأحجام وشيفرة HTML جاهزة للاستخدام وأشهر الأخطاء التي يجب تجنبها.

كان وضع الفافيكون فوضوياً في السابق: كان كل متصفح ونظام تشغيل يطلب حجمه الخاص، ما أنتج كتل <head> سيئة السمعة من 20 سطراً. أما اليوم فقد أصبح معظم ذلك قديماً. تقوم المتصفحات الحديثة بتحجيم أيقونة واحدة جيدة، ويطلب iOS حجماً واحداً، ويقرأ Android ملف manifest. يفصل هذا المقال ما هو ضروري فعلاً عمّا هو مجرد إضافة جيدة.

الإجابة المختصرة: المجموعة المثالية من ملفات الفافيكون

• favicon.ico (أحجام 16 و32 و48 بكسل في ملف واحد) في جذر الموقع. لا تزال المتصفحات وقارئات الخلاصات وكثير من الأدوات تطلب /favicon.ico تلقائياً.
• favicon.svg (اختياري لكنه موصى به) لعرض واضح بأي حجم ودعم الوضع الداكن.
• PNG بأحجام 16x16 و32x32 و96x96 كبدائل صريحة. تفيد نسخة 96 بكسل في بحث Google، الذي يتطلب مضاعفاً للعدد 48 بكسل.
• apple-touch-icon.png بحجم 180x180، معتمة وبدون شفافية.
• PNG بحجم 192x192 و512x512 في manifest.json، إضافةً إلى أيقونة maskable بحجم 512x512 لنظام Android.
• وسم theme-color لتلوين واجهة المتصفح على الجوال.
• بلاطات Windows (70 و150 و310 بكسل) مع browserconfig.xml فقط لنسخ Windows القديمة والمواقع المثبتة في 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 الإضافة لأن Google Search يعرض الفافيكون بجوار النتائج ويشترط أيقونة مربعة يكون حجمها مضاعفاً للعدد 48 بكسل (48x48 و96x96 و144x144 وهكذا). يمنح ملف 96 بكسل Google مصدراً أوضح من ملف 48 بكسل عند تصغيره لنتائج الجوال.

نصيحة تصميمية: عند 16 بكسل تختفي التفاصيل الدقيقة. استخدم شكلاً بسيطاً وجريئاً، وتبايناً عالياً، ونصاً قليلاً أو معدوماً. يمكنك تعديل أيقونتك ومعاينتها في محرر 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>

لاحظ أن استعلام الوسائط يعكس سمة المتصفح أو نظام التشغيل، وهي التي يستخدمها شريط التبويبات. ولا يتبع زر تبديل السمة الموجود في موقعك.

هناك سلوك غريب معروف: عند إدراج ICO وSVG معاً، قد يختار Chrome ملف ICO. أما التصريح عن ICO مع sizes="32x32" ثم إدراج SVG بعده فيجعل Chrome يفضّل SVG، كما هو موضح في الشيفرة أدناه.

أيقونة Apple touch: حجم 180x180 والأحجام القديمة

عندما يضيف المستخدم موقعك إلى الشاشة الرئيسية في iOS أو iPadOS، يستخدم Safari الأيقونة apple-touch-icon. يكفي اليوم ملف PNG واحد بحجم 180x180 بكسل: يقوم iOS بتصغيره للأجهزة الأقدم وأجهزة iPad. سمِّه apple-touch-icon.png وضعه في الجذر؛ بل إن iOS يبحث عن هذا الملف افتراضياً إذا لم يوجد وسم رابط.

قواعد أيقونة Apple:

• بدون شفافية. يملأ iOS البكسلات الشفافة باللون الأسود، لذا غالباً ما يتحول الشعار الشفاف إلى بقعة سوداء. أضف لون خلفية صلباً.
• بدون زوايا مستديرة. يطبق iOS قناعه المستدير الخاص. قدّم مربعاً كاملاً.
• أبقِ المحتوى المهم بعيداً عن الحواف تماماً، لأن الزوايا تُقتطع.

متى تحتاج إلى الأحجام القديمة (57 و72 و76 و114 و120 و144 و152 و167)؟ فقط إذا كنت تدعم iOS 6 أو أقدم، أو تريد تحكماً دقيقاً بالبكسل لكل جهاز بالنسبة إلى iPad Pro (167 بكسل) وiPad (152 بكسل). وفي كل المواقع تقريباً في 2026، يكفي ملف 180x180 وحده. ويتضمن إعداد التوافق الأقصى أدناه بعضها للاكتمال.

أيقونات Android وPWA: حجم 192 و512 وmaskable

يقرأ Chrome على Android والمتصفحات الأخرى الداعمة لـ PWA الأيقونات من ملف manifest لتطبيق الويب لا من <link rel="icon">. ولكي يكون التطبيق قابلاً للتثبيت تحتاج على الأقل إلى ملفي PNG بحجم 192x192 و512x512. تُستخدم أيقونة 192 بكسل على الشاشة الرئيسية ومشغّل التطبيقات؛ وتظهر أيقونة 512 بكسل على شاشات البداية ونوافذ التثبيت.

الأيقونات القابلة للقناع (maskable) والمنطقة الآمنة

يمكن اقتصاص أيقونات Android التكيفية على شكل دائرة أو شبه دائرة أو شكل آخر حسب الجهاز. صُممت الأيقونة 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؛ الاسم لا يهم، المهم هو الرابط.

بلاطات Windows وملف browserconfig.xml

يتيح Windows 8.1 و10 للمستخدمين تثبيت موقع في قائمة ابدأ، ويقرأ IE11 وEdge القديم صور البلاطات من browserconfig.xml. الأحجام المعتادة هي 70x70 (صغير) و150x150 (متوسط) و310x150 (عريض) و310x310 (كبير). يستخدم Edge المبني على Chromium ملف manifest والفافيكون العادي بدلاً من ذلك، لذا فهذه ميزة قديمة. لا تضمّنها إلا إذا كان جمهورك لا يزال يشمل أنظمة 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: تلوين واجهة المتصفح

يخبر وسم 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 إذا كان الظهور في بحث Google مهماً، وأيقونة maskable إذا كنت تقدم PWA.

<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" يُحلّ نسبةً إلى العنوان الحالي، فيعمل على / لكنه يتعطل على /blog/post/. استخدم عناوين نسبية إلى الجذر (/favicon.ico) أو عناوين مطلقة. تحقق أيضاً من أن الملفات موجودة فعلاً: افتح كل عنوان مباشرة في المتصفح وتأكد من أنه يعيد HTTP 200، لا إعادة توجيه إلى صفحة 404 أو جدار تسجيل دخول.

2. سمة sizes مفقودة أو خاطئة

بدون sizes، يضطر المتصفح إلى تنزيل الأيقونات لفحصها، وقد يختار الأيقونة الخطأ. صرّح دائماً عن sizes في روابط PNG وتأكد من أنها تطابق الأبعاد الحقيقية بالبكسل. فملف موسوم 32x32 وهو في الواقع 64x64 يسبب نتائج غير متسقة.

3. التخزين المؤقت العدواني

تخزن المتصفحات الفافيكون مؤقتاً لفترة طويلة، وغالباً بشكل مستقل عن ذاكرة الصفحة المؤقتة. وبعد تغيير الهوية البصرية قد تبقى الأيقونة القديمة لأيام. غيّر اسم الملف أو أضف سلسلة استعلام للإصدار (/favicon.ico?v=2) وحدّث وسوم الروابط. غالباً لا تحدّث إعادة التحميل الإجبارية أيقونة التبويب؛ أما فتح عنوان الأيقونة مباشرة وإعادة تحميله فيفعل ذلك عادةً.

4. صور غير مربعة

يجب أن يكون الفافيكون مربعاً. الشعار المستطيل يُمدَّد أو يُقتطع أو يُحاط بحواف بشكل لا يمكن التنبؤ به. صمم علامة مربعة مخصصة، مثل حرف أول أو رمز، بدلاً من تصغير شعار نصي عريض.

5. أيقونات Apple touch الشفافة التي تتحول إلى السواد

يملأ iOS الشفافية باللون الأسود. امنح أيقونة 180x180 خلفية معتمة ولا تستدر الزوايا مسبقاً.

6. أيقونات maskable بدون منطقة آمنة

إذا لامس الشعار حواف أيقونة maskable، فسيقطعه Android. أبقِه داخل الدائرة المركزية البالغة 80% واملأ اللوحة بالكامل بلون الخلفية.

7. حظر الأيقونات عن الزواحف

إذا كان robots.txt يمنع مسار الفافيكون، فلن يتمكن Google من جلبه وسيعرض أيقونة كرة أرضية عامة في نتائج البحث. تذكّر أيضاً أن Google يحتاج الفافيكون على المضيف نفسه الذي توجد عليه الصفحة ولا يحدّثه إلا من حين لآخر، لذا قد تستغرق التغييرات أياماً أو أسابيع لتظهر.

8. نسيان رابط manifest أو الأغراض (purposes)

ملف manifest غير مربوط، أو يفتقر إلى أيقونات 192 و512 بكسل، يمنع ظهور نافذة التثبيت في Chrome. تحقق منه في أدوات المطور بالمتصفح ضمن تبويب Application.

أنشئ المجموعة كاملة بنقرة واحدة

إنشاء عشرات الملفات يدوياً في محرر صور، ثم التحويل إلى ICO وكتابة ملف manifest، أمر مرهق ومعرض للأخطاء. يقوم MakeFav بإنشاء جميع الملفات المذكورة أعلاه من صورة واحدة أو نص أو إيموجي: favicon.ico متعدد الأحجام، وملفات PNG، وSVG، وأيقونة Apple touch، وملفات PNG بحجم 192/512، وأيقونة maskable، وبلاطات Windows، وملفي manifest.json وbrowserconfig.xml، إضافةً إلى مقطع HTML جاهز للصق، كل ذلك في تنزيل ZIP واحد. يمكنك ضبط الخلفية والهوامش والشكل في المحرر، والتحقق من موقع قائم باستخدام فاحص الفافيكون، وأتمتة الإنشاء عبر موارد المطورين.

قائمة التحقق للنشر

1. ارفع جميع الملفات إلى جذر موقعك.
2. الصق مقطع HTML في <head> في كل صفحة (أو في القالب المشترك).
3. تأكد من أن المسارات نسبية إلى الجذر وتعيد HTTP 200.
4. افحص الوضعين الفاتح والداكن، والتثبيت على الشاشة الرئيسية في iOS، والتثبيت على Android.
5. شغّل الفاحص لاكتشاف الأحجام المفقودة أو غير المطابقة.
6. تجاوز الذاكرة المؤقتة بسلسلة إصدار إذا استبدلت أيقونة قديمة.

الأسئلة الشائعة

هل ما زلت بحاجة إلى favicon.ico في 2026؟

نعم. فعلى الرغم من أن المتصفحات الحديثة تقبل PNG وSVG، لا يزال كثير من الزواحف وقارئات الخلاصات وعملاء البريد والمتصفحات القديمة يطلب /favicon.ico مباشرة. ملف ICO متعدد الأحجام بصور 16 و32 و48 بكسل هو ملف صغير يمنع اختفاء الأيقونات وأخطاء 404.

ما حجم الفافيكون المناسب لبحث Google؟

يشترط Google فافيكون مربعاً يكون حجمه مضاعفاً للعدد 48 بكسل، وبحد أدنى 48x48. ملف PNG بحجم 96x96 خيار آمن، كما أن SVG مدعوم أيضاً. ويحتاج Google إلى أن يكون الملف قابلاً للزحف، لذا لا تحظره في robots.txt. وقد تستغرق التحديثات أياماً أو أسابيع لتظهر.

هل يكفي حجم 180x180 لأيقونة Apple touch؟

في معظم المواقع، نعم. يقوم iOS وiPadOS بتصغير ملف PNG بحجم 180x180 لكل جهاز حالي. أما الأحجام الأقدم (من 57 إلى 152 بكسل) فتهم فقط إصدارات iOS القديمة جداً. تذكّر استخدام خلفية معتمة حتى لا تتحول الأيقونة إلى السواد.

ما هي الأيقونة maskable وهل أحتاج إليها؟

الأيقونة maskable هي ملف PNG بحجم 512x512 مصمم لأشكال الأيقونات التكيفية في Android. يقع محتواها المهم داخل دائرة قطرها 80% في المركز، وتملأ الخلفية المربع بأكمله. لا تحتاج إليها إلا إذا كنت تقدم PWA قابلاً للتثبيت، لكنها تجعل الأيقونة تبدو أصلية بدلاً من أن تجلس داخل دائرة بيضاء.

لماذا لا تزال أيقونتي القديمة تظهر بعد تغييرها؟

تخزن المتصفحات الفافيكون بشكل منفصل ولفترة طويلة. أعد تسمية الملف أو أضف سلسلة استعلام للإصدار مثل ?v=2، وحدّث وسوم الروابط، ثم افتح عنوان الأيقونة مباشرة وأعد تحميله. وقد تستغرق محركات البحث وقتاً أطول لتحديث نسختها الخاصة.