ما هي Favicon؟
Favicon هي اختصار لكلمتي Favorites Icon، وتعني أيقونة المفضلة، وتُعرف أيضاً باسماء أخرى، كـ أيقونة الموقع (Website Icon)، أيقونة الاختصار (Shortcut Icon)، وأيقونة عنوان الويب (Url Icon).
وهي أيقونة صغيرة الحجم، لا تتجاوز أبعادها في العادة 16 بكسل في العرض والارتفاع، يحددها مصمم الموقع لتكون ظاهرة في شرط العنوان (Address bar) في متصفح الويب.
أمثلة على Favicon
بعض الصور من عدد من الموقع التي تستخدم الأيقونة.
- استخدام موقع مدن الجوزاء لـ Favicon
- استخدام موقع جوجل لـ Favicon
- استخدام موقع مايكروسوفت لـ Favicon
كما تظهر الأيقونة عند اضافة موقع الويب المستخدم لها في قائمة المفضلة، على الشكل التالي:
تاريخ Favicon
تم تقديم Favicon للمرة الأولى بواسطة متصفح Internet Explorer الإصدار الخامس، وكانت تستخدم بوضع صورة بصيغة ico وباسم favicon على المجلد الجذر في الموقع (public_html) فيقوم المتصفح آلياً بالتقطها وعرضها في شريط العنوان.
وفيما بعد ظهرت طرق أكثر مرونة لعرض هذه الأيقونة وتخصيصها، من خلال شفرات برمجية وتصميمية، حتى أصبح بالإمكان تعيين Favicons مختلفة لصفحات منعزلة داخل الموقع، وليس كما كان الأمر في السابق؛ أيقونة محدودة لجميع صفحات الموقع.
تجهيز Favicon لموقعك
عند الرغبة بوضع Favicon لموقعك، تبدأ الخطوة الأولى بتجهيز الأيقونة، والتي ستحتوي في الغالب على صورة مصغرة لشعار موقعك، باستخدام أحد برامج تحرير الصور، كبرنامج الفوتوشوب، كما تتوفر برامج خاصة لتصميم هذا النوع من الأيقونات.
حاول الالتزام بالمعايير القياسية التالية عند تجهيز الأيقونة:
- صيغة الأيقونة: تكون صيغة الأيقونة بأحد امتدادات PNG (وهو الامتداد القياسي لـ W3C)، GIF، أو ICO.
- أبعاد الأيقونة: 16x16 أو 32x32 بكسل.
- ألوان الأيقونة: 8 بت أو 24 بت.
تنصيب Favicon في صفحات موقعك
بعد تجهيز الأيقونة قم برفعها على مساحة موقعك، ثم توجه إلى شفرات الرأسية (Head) في الصفحات التي تود عرض الأيقونة لها، واطبع الشفرة التالية:
تأكد من استبدال نوع الأيقونة (type) بنوع الأيقونة المستخدم، ووضع الاسم والمسار الصحيح للأيقونة في مكانه بدلاً عن الاسم والمسار المُعطى في المثال.