ما هو Favicon ولماذا موقعك يحتاجه بكل المقاسات
محتوى المقال
فتحت تبويبات كتير في المتصفح ولاحظت إن بعض المواقع سهل تميّزها فورًا من الأيقونة الصغيرة جنب اسم الصفحة، وبعضها بيبان بأيقونة فارغة أو عامة؟ الأيقونة دي اسمها Favicon، وهي تفصيلة صغيرة لكن بتأثر فعليًا على احترافية موقعك في نظر الزائر. في هذا الدليل هنشرح كل حاجة عن Favicon: أهميته، المقاسات المطلوبة، وكيف تضيفه صح لموقعك.
ما هو Favicon ولماذا هو مهم؟
Favicon هي أيقونة صغيرة مرتبطة بموقعك، بتظهر في أماكن كتيرة: تبويب المتصفح، قائمة المفضلة (Bookmarks)، نتائج البحث على الجوال، وأيقونة إضافة الموقع للشاشة الرئيسية. غياب Favicon واضح بيدي انطباع إن الموقع غير مكتمل أو غير احترافي، وبيصعّب على الزائر يميّز تبويبك وسط عشرة تبويبات مفتوحة تانية.
جدول المقاسات المطلوبة ولماذا كل هذا العدد؟
| المقاس | الاستخدام |
|---|---|
| 16×16 | تبويب المتصفح على سطح المكتب |
| 32×32 | شريط المهام وقائمة المفضلة |
| 180×180 | أيقونة إضافة الموقع لشاشة آيفون الرئيسية (Apple Touch Icon) |
| 192×192 | أيقونة تطبيقات أندرويد التقدمية (PWA) |
| 512×512 | شاشة البداية عند تشغيل الموقع كتطبيق (PWA) |
السبب في تعدد المقاسات: كل جهاز أو سياق استخدام يعرض الأيقونة بحجم مختلف، واستخدام نفس الملف الصغير في كل مكان يجعله يبدو ضبابيًا في السياقات الأكبر.
كيف تصمم وتصدّر أيقونتك؟
باستخدام مولّد أيقونة الموقع على فورا.tools:
- اختر خلفية بلون واحد أو تدرّج يعكس هوية موقعك.
- اختر شكل الأيقونة: حواف دائرية، مربع، أو دائرة كاملة.
- اكتب حرفًا أو حرفين يمثلان اسم موقعك، أو ارفع شعارًا جاهزًا بدلًا من ذلك.
- راقب المعاينة الحية بالمقاسات المختلفة (16، 32، 180) للتأكد من وضوحها في كل حجم.
- اضغط "تحميل كل المقاسات (ZIP)" للحصول على كل الملفات الخمسة دفعة واحدة، مع كود HTML جاهز.
إضافة الكود الصحيح لموقعك
بعد تحميل الملفات، ارفعها لجذر موقعك (نفس مجلد ملف index.html الرئيسي)، وأضف أسطر HTML التالية
داخل قسم <head> في كل صفحة من صفحات موقعك — الأداة توفر لك هذا الكود جاهزًا
للنسخ مباشرة بدون حاجة لكتابته يدويًا.
نصائح تصميم لأيقونة واضحة
بما إن الأيقونة بتظهر بحجم صغير جدًا في أغلب الاستخدامات، البساطة هي المفتاح. حرف واحد بارز أو رمز بسيط بيعمل أوضح بكثير من شعار معقد بتفاصيل كتيرة، لأن التفاصيل الدقيقة بتختفي أو تتحول لبقعة غير واضحة في المقاس الصغير جدًا (16×16). استخدم لون خلفية متباين بشدة مع لون النص أو الشعار لضمان الوضوح حتى في أصغر مقاس.
أسئلة شائعة
لماذا أحتاج أكثر من مقاس لنفس الأيقونة؟
كل جهاز ومنصة يطلب مقاسًا مختلفًا: تبويب المتصفح يحتاج مقاسًا صغيرًا جدًا، بينما أيقونة إضافة الموقع على الشاشة الرئيسية للجوال تحتاج مقاسًا أكبر بكثير.
ماذا يحدث إذا لم أضف Favicon لموقعي؟
سيظهر تبويب المتصفح بأيقونة افتراضية فارغة، مما يعطي انطباعًا بأن الموقع غير مكتمل، ويصعّب على الزائر تمييز تبويبك بين عدة تبويبات.
هل يمكن استخدام شعار معقد كـ Favicon؟
يُفضّل تبسيط الشعار قدر الإمكان، لأن الأيقونة تظهر بحجم صغير جدًا. حرف واحد بارز يعمل بشكل أوضح بكثير من شعار مفصّل.
أين أضع ملفات Favicon على موقعي؟
عادة توضع في المجلد الجذري لموقعك، مع إضافة أسطر وسم HTML المناسبة داخل قسم head في كل صفحة.
بعد إضافة الأيقونة، اهتم كمان بشكل موقعك عند المشاركة عبر صانع صورة المشاركة (OG Image)، وتأكد من إضافة بيانات منظّمة لصفحاتك المهمة.