خاصية favicon في لغة HTML تُستخدم لإضافة أيقونة صغيرة تُعرض في علامة تبويب المتصفح بجوار عنوان الصفحة، وفي قائمة المواقع المفضلة (Bookmarks)، وفي سجل التصفح. تُعرف أيضًا باسم "أيقونة المفضلة" أو "أيقونة الموقع".

أهمية استخدام favicon:

  • تمييز العلامة التجارية: تُساعد favicon على تمييز موقعك الإلكتروني عن المواقع الأخرى، مما يُعزز الوعي بعلامتك التجارية.
  • سهولة التعرّف على الموقع: تُسهّل على المستخدمين العثور على موقعك بسرعة في علامات التبويب المفتوحة أو في قائمة المواقع المفضلة.
  • تحسين تجربة المستخدم: تُضيف لمسة جمالية واحترافية للموقع، مما يُحسّن تجربة المستخدم.

كيفية إضافة favicon إلى صفحة HTML:

يتم إضافة favicon باستخدام الوسم <link> داخل القسم <head> من ملف HTML. هناك طريقتان رئيسيتان لإضافة favicon:

1. استخدام ملف صورة واحد (الطريقة الأبسط):

يُمكن استخدام ملف صورة واحد بأحد الصيغ التالية:

  • .ico (الأكثر توافقًا مع المتصفحات القديمة).
  • .png (الأكثر شيوعًا ومُوصى به).
  • .gif (يُمكن استخدامه، ولكنه أقل شيوعًا).
  • .jpg أو .jpeg (يُمكن استخدامه، ولكنه ليس مُوصى به).
  • .svg (مُناسب للأحجام المختلفة، ولكنه قد لا يكون مدعومًا بشكل كامل في المتصفحات القديمة).

الكود التالي يُوضح كيفية إضافة favicon باستخدام ملف .png:

HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مثال على استخدام Favicon</title>
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <h1>مرحباً بكم في موقعي</h1>
</body>
</html>
  • rel="icon": يُحدد أن الرابط هو لأيقونة الموقع.
  • type="image/png": يُحدد نوع الملف (يجب تغييره حسب نوع الملف المُستخدم).
  • href="favicon.png": يُحدد مسار ملف الأيقونة. يجب وضع ملف الأيقونة في نفس مجلد ملف HTML أو تحديد مسار صحيح له.

2. استخدام أحجام وأنواع مختلفة من الأيقونات (لتحسين التوافق مع الأجهزة المختلفة):

يُمكن توفير أحجام وأنواع مختلفة من الأيقونات لضمان ظهورها بشكل مثالي على مختلف الأجهزة والمتصفحات. يتم ذلك باستخدام عدة وسوم <link> مع تحديد سمات إضافية:

HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مثال على استخدام Favicon</title>
    <link rel="icon" sizes="16x16" type="image/png" href="favicon-16x16.png">
    <link rel="icon" sizes="32x32" type="image/png" href="favicon-32x32.png">
    <link rel="icon" sizes="96x96" type="image/png" href="favicon-96x96.png">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <h1>مرحباً بكم في موقعي</h1>
</body>
</html>

  • sizes="16x16"، sizes="32x32"، sizes="96x96": تُحدد أحجام الأيقونات.
  • rel="apple-touch-icon": يُستخدم لأجهزة Apple (iPhone و iPad).
  • rel="manifest": يُستخدم لملف manifest.json الذي يُمكن استخدامه لتخصيص مظهر الموقع بشكل أكبر، خاصةً 
  • على الأجهزة المحمولة.
  • جرب الان

إنشاء ملفات favicon:

يُمكن إنشاء ملفات favicon باستخدام برامج تحرير الصور مثل Photoshop أو GIMP، أو باستخدام مواقع ويب مُخصصة لإنشاء favicon، مثل:

هذه المواقع تُساعدك على إنشاء ملفات favicon بأحجام وأنواع مختلفة بسهولة.

نصائح مهمة:

  • استخدم صورة عالية الجودة وواضحة.
  • حاول أن تكون الأيقونة بسيطة وسهلة التذكر.
  • اختبر ظهور الأيقونة على مختلف المتصفحات والأجهزة.

باستخدام هذه المعلومات، يُمكنك إضافة favicon احترافية لموقعك الإلكتروني بسهولة.