لماذا Favicon ما زالت تهمّ في 2026
الـ Favicon هي تلك الصورة الصغيرة بحجم 16×16 أو 32×32 التي تظهر في تبويب المتصفّح بجوار عنوان الموقع. تبدو تفصيلاً بسيطاً، لكنّها أوّل ما يراه المستخدم — قبل المحتوى، قبل التصميم، قبل أيّ شيء آخر. ومع تعدّد التبويبات، تصبح هي الطريقة الوحيدة لتمييز موقعك عن العشرات الأخرى المفتوحة.
في 2026، Favicon لم تعد ملفّاً واحداً. هي «نظام» من 5-7 ملفّات بمقاسات مختلفة، لأنّ كلّ منصّة تطلب مقاساً مختلفاً: المتصفّح، نظام iOS، Android، Windows، تطبيقات PWA. تسليم Favicon ناقص يعني ظهور أيقونة مُشوَّهة أو فارغة على بعض المنصّات.
المقاسات المطلوبة في 2026
القائمة الكاملة للمقاسات التي يحتاجها موقع جدّي:
16×16: تبويب المتصفّح الكلاسيكي. الأصغر، الأكثر تحدّياً تصميمياً.
32×32: تبويب المتصفّح على شاشات Retina. هذه هي «الافتراضية الحقيقية» في 2026.
48×48: أيقونة موقع في Windows (taskbar pinned site).
180×180: Apple Touch Icon. عندما يضيف مستخدم iOS الموقع لشاشته الرئيسية، هذه الأيقونة تظهر.
192×192: أيقونة Android لتطبيقات PWA.
512×512: أيقونة splash screen لـ PWA على Android. أيضاً تُستخدم في Chrome OS و Microsoft Store.
بعض المواقع تضيف 70×70 و 150×150 و 310×310 لـ Windows Tiles، لكن هذه أصبحت أقلّ أهمّيةً في 2026 مع تراجع استخدام Windows Tiles.
قواعد تصميم Favicon فعّالة
1. التبسيط الشديد. أنت تصمّم لـ 16×16 بكسل. ما يبدو رائعاً في 512×512 قد يكون «بقعة لون» في 16×16. اختبر تصميمك بالمقاس الأصغر أوّلاً.
2. تجنّب التفاصيل الدقيقة. خطوط رفيعة، نصّ صغير، تدرّجات معقّدة كلّها تختفي في الأحجام الصغيرة. التزم بشكل واحد قويّ.
3. تباين قويّ. Favicon تظهر على خلفيّات متعدّدة (تبويبات فاتحة، داكنة، رمادية). اختر ألواناً متباينة مع الخلفيّتين الفاتحة والمظلمة.
4. ابتعد عن الشعار الكامل. Favicon ليس مكان شعار شركتك بالاسم. هو مكان «الرمز» — الجزء الأكثر تميّزاً والأبسط من شعارك. Apple = تفّاحة. ليست كلمة Apple.
5. هامش داخلي. اترك 10-15% هامش حول العنصر داخل المربّع. Favicon تظهر مع حواف مُدوّرة في معظم الأنظمة، ووجود هامش يحمي من «قصّ» العنصر.
ملفّ site.webmanifest
هذا الملفّ يُخبر Android والمتصفّحات بكيفية عرض الموقع كتطبيق PWA. حتى لو لم تكن تبني PWA، وجود manifest محترم يحسّن تجربة المستخدم الذي يضيف موقعك لشاشته الرئيسية.
المحتوى الأساسي:
{ "name": "اسم الموقع الكامل", "short_name": "اسم قصير", "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }], "theme_color": "#000000", "background_color": "#ffffff", "display": "standalone" }
theme_color: لون شريط العنوان عندما يفتح المستخدم الموقع كتطبيق. على Android، هذا اللون يظهر في الـ status bar.
background_color: لون splash screen عند فتح PWA.
display: standalone يُخفي شريط المتصفّح ويجعل التطبيق يبدو native.
مميّزات iOS الخاصّة
iOS له قواعد منفصلة عن باقي العالم:
1. لا تستخدم SVG. iOS يدعمها نظرياً، لكن لا يعرضها بشكل موثوق على شاشة البداية. PNG فقط.
2. الأبعاد القياسية. iOS كان يدعم 57×57، 72×72، 114×114... الكثير من المقاسات القديمة. في 2026، 180×180 كافٍ، ويُكبَّر/يُصغَّر تلقائياً.
3. الزوايا المُدوّرة. iOS يُضيفها تلقائياً. لا تُدوّر زوايا الأيقونة بنفسك — ستحصل على زوايا مُدوّرة مرّتين (تبدو رديئة).
4. لا شفّافية. iOS يضع خلفية بيضاء خلف الشفّافية. صمّم بافتراض خلفية صلبة.
5. تأثير «luminous» الكلاسيكي. iOS كان يضيف لمسة بريق على Apple Touch Icons. هذا التأثير اختفى منذ iOS 7. تجاهل أيّ نصيحة قديمة عن «precomposed».
اختبار Favicon قبل الإطلاق
قائمة فحص قبل النشر:
1. افتح الموقع في تبويب جديد. هل الـ Favicon تظهر بوضوح؟
2. افتح Developer Tools - Network. هل كلّ ملفّات Favicon تُحمَّل بنجاح؟ خطأ 404 على Favicon شائع جدّاً.
3. اختبر على Safari iOS: «إضافة إلى الشاشة الرئيسية». هل الأيقونة تظهر صحيحة؟
4. اختبر على Chrome Android: «إضافة إلى الشاشة الرئيسية». هل splash screen يظهر بألوان manifest الصحيحة؟
5. اختبر في الوضع المظلم. بعض المتصفّحات تعرض Favicon على خلفية داكنة في الوضع المظلم — هل ما زالت مرئيّة؟
أخطاء شائعة
1. ملفّ واحد فقط. اعتماد favicon.ico بدون مقاسات منفصلة. النتيجة: أيقونة مُشوَّهة على iOS و Android.
2. مسارات نسبية. استخدام ./favicon.png بدلاً من /favicon.png. يكسر الـ Favicon على الصفحات الفرعية.
3. cache طويل جدّاً. Favicon يُخزَّن بشدّة في المتصفّح. عند تحديث التصميم، أضف parameter للنسخة: /favicon-32.png?v=2.
4. نسيان manifest. الموقع يعمل بدونه، لكن PWA لن تعمل، و Android سيستخدم Favicon افتراضية رديئة.
5. تصميم Favicon بدون اختبار الحجم. ما يبدو ممتازاً بحجم 256×256 في Figma قد يكون «بقعة لون» بحجم 16×16. اختبر دائماً بالمقاس الفعلي.
