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