كيفية إضافة أيقونة مفضلة في HTML (وأي وسوم rel تستخدم)

إضافة أيقونة مفضلة لموقعك يجب أن تكون من أبسط المهام في تطوير الويب، لكنها تربك المطورين أكثر مما قد تتوقع. بين النصائح المتضاربة حول أي وسوم <link> تستخدم، وقيم سمات rel المربكة، والمتصفحات التي تخزّن الأيقونة القديمة بعناد، يمكن أن يبدو جعل الأيقونة المفضلة تظهر فعلاً كلعبة تخمين.

الحقيقة هي أن إعداد الأيقونة المفضلة لمعظم المواقع يمكن اختصاره في ملف واحد ووسم HTML واحد. يقطع هذا الدليل الضوضاء ويعطيك بالضبط ما تحتاجه: الإعداد العملي الأدنى، وأكثر تنويعات وسم rel فائدة، وتعليمات واضحة للتعامل مع مشكلات التخزين المؤقت.

إذا لم يكن لديك ملف favicon.ico بعد، أنشئ واحدًا باستخدام Any2ICO في أقل من دقيقة. يقبل PNG وSVG وJPG وWebP وصيغ أخرى، وينتج ملف ICO متعدد الأحجام يعمل في كل مكان. ثم عد هنا لربطه بـ HTML.

أبسط إعداد للأيقونة المفضلة

قبل الغوص في تنويعات الوسوم والحالات الخاصة، إليك النهج الذي يعمل للغالبية العظمى من المواقع. يتطلب ملفًا واحدًا وسطرًا واحدًا من HTML.

ضع favicon.ico في جذر نطاقك. ارفع أو انشر ملف favicon.ico بحيث يكون متاحًا على https://yourdomain.com/favicon.ico. هذا هو المسار الذي تتحقق منه المتصفحات افتراضيًا منذ أواخر التسعينيات.

أضف وسم link واحد في رأس HTML.

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>عنوان صفحتك</title>
  <link rel="icon" href="/ar/favicon.ico" sizes="any">
</head>
<body>
  <!-- المحتوى -->
</body>
</html>

وسم <link> الواحد هذا كافٍ لكل متصفح رئيسي: Chrome وFirefox وSafari وEdge وحتى الإصدارات القديمة من Internet Explorer.

التخزين المؤقت و"الأيقونة المفضلة لا تظهر"

نشرت أيقونتك المفضلة الجديدة، وأعدت تحميل الصفحة، والأيقونة القديمة لا تزال تحدق بك من تبويب المتصفح. هذه ليست خطأ في كودك. إنها بشكل شبه مؤكد مشكلة تخزين مؤقت.

المتصفحات تخزّن الأيقونات المفضلة بشكل مكثف. على عكس أصول الصفحة العادية، غالبًا ما تُخزّن الأيقونات المفضلة بشكل منفصل ولفترات أطول بكثير.

التحديث القوي: اضغط Ctrl+Shift+R (Windows/Linux) أو Cmd+Shift+R (macOS) لتجاوز ذاكرة التخزين المؤقت وإعادة تحميل جميع الأصول من الخادم.

نافذة خفية: افتح موقعك في نافذة تصفح خاصة أو خفية. هذا يبدأ بذاكرة تخزين مؤقت فارغة تمامًا وسيحمّل الأيقونة المفضلة من الخادم مباشرة.

مسح ذاكرة التخزين المؤقت يدويًا: إذا أكدت النافذة الخفية الأيقونة الجديدة لكن جلستك العادية لا تزال تعرض القديمة، امسح الصور والملفات المخزّنة في متصفحك.

إضافة سلسلة استعلام لكسر التخزين المؤقت: كإجراء مؤقت أثناء التطوير، يمكنك إلحاق سلسلة استعلام لإجبار المتصفح على التعامل مع الأيقونة المفضلة كمورد جديد: <link rel="icon" href="/ar/favicon.ico?v=2" sizes="any">.

الأحجام وخيارات الملفات: ICO مقابل PNG

هل تستخدم ملف ICO أم PNG أم كليهما؟ الإجابة تعتمد على مقدار التعقيد الذي تريده في إعدادك.

ICO هو الخيار الشامل. صيغة ICO كانت صيغة الأيقونة المفضلة القياسية منذ أن قدّم Internet Explorer 5 الأيقونات المفضلة في 1999. يمكن لملف ICO واحد أن يحتوي على أحجام متعددة، فالمتصفح يجد دائمًا الدقة المناسبة. للبساطة والتوافق الأقصى، ICO هو الرهان الأكثر أمانًا.

PNG بديل حديث. جميع الإصدارات الحالية من Chrome وFirefox وSafari وEdge تدعم أيقونات PNG المفضلة عبر وسم <link rel="icon" type="image/png">.

SVG هو الخيار الأحدث. أيقونات SVG المفضلة مدعومة في Chrome وFirefox وEdge، لكن ليس في Safari حتى أوائل 2025.

لمعظم المواقع، نوصي بالنهج العملي: استخدم ملف ICO متعدد الأحجام كأيقونة مفضلة أساسية وأضف اختياريًا أيقونة PNG أو SVG كتحسين. للتفصيل حول أي الأحجام تضمّن ولماذا، انظر دليلنا شرح أحجام الأيقونات المفضلة.