كيفية تغيير أو إضافة أيقونة Favicon للموقع الخاص بك
عند تصفح أي موقع إلكتروني من خلال المتصفح، تظهر أيقونة صغيرة بجوار عنوان الصفحة داخل تبويب المتصفح، وتُعرف هذه الأيقونة باسم Favicon. وهي عنصر مهم في هوية الموقع وتعطيه طابعًا احترافيًا، حيث تساعد الزائرين في تمييز موقعك بسهولة بين علامات التبويب المفتوحة.
في هذا المقال، سنستعرض كيفية إضافة أو تغيير أيقونة الـ Favicon لموقعك خطوة بخطوة باستخدام ملفات HTML، دون الحاجة لأي إضافات خارجية.
1. تجهيز صورة الأيقونة
أول خطوة هي إعداد صورة مناسبة لتكون أيقونة الـ Favicon الخاصة بموقعك. يفضل أن تكون الأبعاد مربعة (مثل 32x32 أو 64x64 بكسل) وأن تكون الصورة واضحة حتى عند تصغيرها.
قم بتسمية الصورة باسم مميز مثل:
favicon.icoثم ضع هذه الصورة داخل مجلد خاص بالصور داخل ملفات مشروع موقعك. على سبيل المثال، يمكن وضعها داخل مجلد باسم:
imgوبالتالي سيكون مسار الصورة:
img/favicon.ico2. رفع الصورة إلى مجلد المشروع
تأكد من أن الصورة تم نسخها داخل مجلد الصور الخاص بك الموجود في نفس مجلد الصفحة الرئيسية (index.html). إذا كنت تستخدم هيكلًا منظمًا للمجلدات، فضع الصورة في المسار الصحيح لتسهيل ربطها في الكود لاحقًا.
3. تعديل كود HTML لإضافة الأيقونة
بعد التأكد من أن الصورة في مكانها الصحيح، ننتقل إلى الخطوة التالية وهي
تعديل كود HTML الخاص بالموقع لإضافة رابط الأيقونة داخل وسم
<head>.
افتح ملف index.html أو أي ملف HTML رئيسي في موقعك،
ثم أضف السطر التالي داخل وسم <head>:
<link rel="icon" href="img/favicon.ico" type="image/x-icon">شرح الوسوم:
-
rel="icon": يُخبر المتصفح أن هذا الرابط خاص بأيقونة الموقع. -
href="img/favicon.ico": يشير إلى مسار الصورة داخل مجلد المشروع. -
type="image/x-icon": يحدد نوع الملف على أنه أيقونة.
4. حفظ التعديلات وتجربة التحديث
بعد إضافة السطر السابق داخل وسم <head>، احفظ
التعديلات في الملف، ثم افتح الموقع الخاص بك في المتصفح. قد تحتاج إلى تحديث
الصفحة باستخدام (Ctrl + F5) للتأكد من أن المتصفح لا يستخدم نسخة مخزنة من
الصفحة القديمة.
إذا تم تنفيذ الخطوات بشكل صحيح، ستلاحظ ظهور الأيقونة الجديدة بجوار عنوان الصفحة في تبويب المتصفح.
ملاحظات هامة:
-
بعض المتصفحات قد تحتاج إلى مسح الكاش (Cache) لرؤية التغييرات فورًا.
-
تأكد من أن امتداد الصورة هو
.ico، حيث أن هذا الامتداد هو الأفضل لضمان التوافق مع جميع المتصفحات. -
يمكن استخدام امتدادات أخرى مثل
.png، لكن في هذه الحالة تأكد من تحديد النوع بشكل دقيق في الوسمtype، مثل:
<link rel="icon" href="img/favicon.png" type="image/png">الخاتمة
إضافة أيقونة Favicon إلى موقعك هي خطوة بسيطة لكنها تضيف لمسة احترافية تُحسن من مظهر الموقع وتجربة المستخدم. اتبع الخطوات الموضحة في هذا المقال بدقة وستتمكن من تخصيص موقعك بطريقة مميزة.
لو كان لديك أي استفسار أو واجهتك مشكلة أثناء تنفيذ الخطوات، لا تتردد في ترك تعليق وسأقوم بالرد عليك في أقرب وقت ممكن.
هل تحب أكتب المقال ده بأسلوب عامي مصري كمان بحيث يفضل احترافي لكن بنفس روح المقالات اللي بتحبها؟
شاهد الفيديو