مقاسات الفافيكون في 2026: ما الملفات والوسوم التي تحتاجها فعلًا؟

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

المجموعة الكافية في 2026

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

وسوم HTML

ضع هذه الوسوم داخل <head> في كل الصفحات:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0b6e4f">

ملاحظات:

• sizes="32x32" على ملف ICO يمنع بعض المتصفحات من تفضيله على SVG.
• لا حاجة لوسوم msapplication-* القديمة لمعظم المواقع اليوم.
• theme-color يلوّن شريط المتصفح في أندرويد.

ملف manifest

{
  "name": "اسم موقعك",
  "short_name": "موقعك",
  "dir": "rtl",
  "lang": "ar",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#0b6e4f",
  "background_color": "#ffffff",
  "display": "standalone"
}

الأيقونة القابلة للقناع (Maskable)

أندرويد يقص الأيقونات بأشكال مختلفة (دائرة، مربع بحواف مستديرة). الأيقونة “maskable” تضع الشعار في المنطقة الآمنة (دائرة قطرها 80% من المساحة) مع خلفية ملونة تملأ الباقي، حتى لا يُقص جزء من الشعار. للتحقق من صيغة الملف استخدم منسق JSON، وراجع دليل أساسيات JSON.

أيقونة SVG مع الوضع الداكن

ميزة SVG أنه يدعم CSS داخليًا:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #0b6e4f; }
    @media (prefers-color-scheme: dark) { path { fill: #7fe0b8; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

هكذا لا تختفي الأيقونة الداكنة على تبويب داكن. Safari ما زال يعتمد على PNG وICO في بعض المواضع، ولذلك نحتفظ بهما.

شروط ظهور الأيقونة في بحث جوجل

جوجل يعرض الفافيكون بجوار اسم الموقع في نتائج البحث. حسب إرشادات Google Search Central:

• الأيقونة مربعة (نسبة 1:1).
• المقاس من مضاعفات 48 بكسل: 48×48، 96×96، 144×144… أو SVG. الأكبر أفضل لأن جوجل يصغّرها.
• ثابتة الرابط ولا تتغير كثيرًا.
• غير محظورة في robots.txt، لا الأيقونة ولا الصفحة الرئيسية. راجع دليل robots.txt.
• تمثل العلامة التجارية ولا تحتوي محتوى غير لائق؛ جوجل قد يستبدلها بأيقونة افتراضية.
• الوسم <link rel="icon"> موجود في الصفحة الرئيسية للنطاق (أو النطاق الفرعي).

التحديث في النتائج ليس فوريًا؛ قد يستغرق أيامًا إلى أسابيع بعد زحف جوجل للصفحة الرئيسية. يمكنك طلب إعادة فهرسة الصفحة الرئيسية من Search Console.

التصميم لمقاس صغير جدًا

الأيقونة ستُعرض أحيانًا بـ 16×16 بكسل. لذلك:

• بسّط: حرف أو رمز واحد، لا شعارًا كاملًا بنص.
• تجنب النص العربي الطويل: كلمة “متجر” بـ 16 بكسل غير مقروءة؛ استخدم الحرف الأول أو رمزًا.
• تباين عالٍ بين الرمز والخلفية؛ راجع دليل تباين الألوان.
• اختبر على خلفية فاتحة وداكنة.
• حواف حادة: صمم على شبكة البكسل للمقاسات الصغيرة إن أمكن.

لتجهيز الصورة المصدرية بمقاس مربع دقيق، استخدم أداة تغيير حجم الصور، وابدأ من صورة 512×512 على الأقل.

أين تضع الملفات في الأطر الشائعة؟

• Astro وVite وNext.js: ضع الملفات في مجلد public/ لتُخدم من جذر الموقع (/favicon.ico)، وأضف الوسوم في التخطيط الرئيسي (Layout). Next.js يدعم أيضًا ملفات app/icon.png وapp/apple-icon.png التي يولد لها الوسوم تلقائيًا.
• WordPress: من “المظهر ← تخصيص ← هوية الموقع ← أيقونة الموقع”، ارفع صورة مربعة 512×512 على الأقل، فيولّد المقاسات المطلوبة.
• Shopify ومنصات المتاجر: خيار “Favicon” في إعدادات القالب غالبًا، بصورة مربعة.
• مواقع HTML ثابتة: في الجذر بجوار index.html.

كيف تتحقق أن الأيقونة تعمل؟

1. افتح https://موقعك/favicon.ico و/icon.svg مباشرة في المتصفح؛ يجب أن تظهر الصورة لا صفحة 404.
2. افحص المصدر (Ctrl+U) وتأكد من وجود الوسوم في <head>.
3. في أدوات المطور ← Application ← Manifest، تأكد أن الأيقونات تُحمّل دون أخطاء.
4. أضف الموقع إلى الشاشة الرئيسية على iPhone وأندرويد وانظر النتيجة.
5. امسح ذاكرة التخزين المؤقت أو افتح نافذة خاصة؛ المتصفحات تحتفظ بالفافيكون القديم بعناد.
6. لنتائج جوجل: افحص الصفحة الرئيسية بأداة فحص الرابط في Search Console، ثم انتظر إعادة الزحف.

صيغة الملفات: PNG أم ICO أم SVG؟

PNG هو الأنسب للأيقونات النقطية لأنه يدعم الشفافية ويُضغط دون فقدان. ICO حاوية قديمة يمكن أن تضم عدة مقاسات PNG في ملف واحد، ونحتفظ بها للتوافق فقط. SVG هو الأفضل للمتصفحات الحديثة لأنه حاد في كل الأحجام وصغير الحجم، بشرط أن يكون التصميم بسيطًا. تجنب JPG للأيقونات، فهو لا يدعم الشفافية ويُظهر تشوهات حول الحواف.

أخطاء شائعة

1. أيقونة غير مربعة: تُشوَّه أو تُرفض في نتائج جوجل.
2. الاعتماد على favicon.ico بمقاس 16×16 فقط: تبدو باهتة على الشاشات عالية الدقة وفي البحث.
3. حظر مجلد الصور في robots.txt فيعجز جوجل عن جلب الأيقونة.
4. نسيان apple-touch-icon: iPhone ينشئ لقطة مصغرة قبيحة من الصفحة بدلها.
5. تغيير الأيقونة دون تغيير الاسم مع تخزين مؤقت طويل: أضف معاملًا مثل ?v=2 أو غيّر اسم الملف.
6. خلفية شفافة لأيقونة Apple: iOS يملأ الشفافية بالأسود؛ استخدم خلفية صلبة.

هل أحتاج مقاسات أخرى؟

مقاسات مثل 57 و72 و114 و152 لأجهزة آبل القديمة لم تعد ضرورية؛ iOS يصغّر أيقونة 180 تلقائيًا. وأيقونات Windows للبلاط (mstile) نادرًا ما تهم اليوم. أضف مقاسًا آخر فقط إذا كانت لديك حاجة محددة، مثل منصة تطلب مقاسًا بعينه.

قائمة تحقق

• favicon.ico في جذر الموقع (32×32).
• icon.svg مع دعم الوضع الداكن.
• apple-touch-icon بمقاس 180×180 بخلفية صلبة.
• أيقونات 192 و512 وأيقونة maskable في manifest.
• الوسوم في <head> لكل الصفحات، والأيقونة غير محظورة.