جاري التحميل...

أيقونة المفضلة في HTML

بنت جلسة Head صندوق بيانات وصفية ابتدائيًا مع charset وviewport وtitle ورابط stylesheet. أيقونة المفضلة (favicon) رابط عملي آخر في head: الأيقونة الصغيرة التي تظهر في تبويب المتصفح بجانب عنوان صفحتك. تساعد الناس على تمييز موقعك بين التبويبات المزدحمة والإشارات المرجعية وبعض قوائم السجل. لا ترسمها بنص CSS — بل توجّه المتصفح إلى ملف صورة صغير.

ما هي أيقونة المفضلة؟

أيقونة المفضلة مورد أيقونة للموقع. يجلبها المتصفح لأن HTML لديك (أو تخمينًا افتراضيًا مثل /favicon.ico) يخبره أين يبحث. الصفحات الحديثة عادةً تعلنها صراحةً بعنصر link حتى يكون المسار ونوع الملف واضحين. يجب أن تبقى الأيقونة بسيطة ومربعة بما يكفي لتُقرأ بأحجام صغيرة جدًا.

إجابة مباشرة

في head المستند، أضف link مع rel="icon" وhref يشير إلى ملف الأيقونة. الخيارات الشائعة: favicon.ico، أو PNG مثل images/favicon.png، أو أيقونة SVG. يجب أن يُحل المسار بنفس طريقة عناوين URL النسبية الأخرى (راجع مسارات الملفات). بعد تغيير الملف، توقّع التخزين المؤقت للمتصفح — تحديث قوي أو نافذة خاصة غالبًا يكشفان الأيقونة الجديدة أسرع من إعادة التحميل العادية.

رابط .ico الكلاسيكي

ما زالت كثير من الدروس تبدأ بـ favicon.ico في نفس مجلد ملف HTML. السمة الاختيارية type تساعد المتصفحات على فهم المورد.

رابط favicon كلاسيكي

html

HTML Code

<head>
<title>My Site</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

قراءة العينة الكلاسيكية

يعيش link في head، بجانب title وبيانات وصفية أخرى
rel="icon" يعلّم المورد كأيقونة مفضلة
href="favicon.ico" يفترض أن ملف الأيقونة بجانب صفحة HTML هذه
type="image/x-icon" تلميح MIME شائع لملفات .ico
بدون مسار صحيح، قد يبقى التبويب بأيقونة افتراضية أو فارغة

متغيرات PNG وSVG

أيقونات PNG سهلة التصدير من أدوات التصميم. أيقونات SVG تبقى حادة عند مقاييس مختلفة عندما يدعمها المتصفح. يمكنك الإبقاء على الأيقونة في مجلد images وتوجيه href إليه.

favicon بصيغة PNG أو SVG

html

HTML Code

<head>
<title>My Site</title>
<link rel="icon" href="images/favicon.png" type="image/png">
<!-- or: href="images/icon.svg" type="image/svg+xml" -->
</head>

اختيار صيغة البداية

.ico — تقليدية، معروفة على نطاق واسع في الأدوات الأقدم
.png — بسيطة للمبتدئين الذين يصدّرون أصول PNG أصلًا
.svg — خيار متجه حاد عندما تدعم متصفحات جمهورك ذلك
لا تحتاج كل صيغة في اليوم الأول. انشر أيقونة واحدة واضحة برابط صحيح، ثم وسّع لاحقًا لحزم apple-touch أو متعددة الأحجام إن تطلّب المشروع ذلك.

المسارات مهمة بقدر أهمية الترميز

إذا أشار href إلى ملف مفقود، يعيد طلب الأيقونة 404 وتفشل أيقونة التبويب بهدوء. راجع أسماء المجلدات والإملاء وما إذا نُقل ملف HTML دون الأيقونة. المسارات النسبية نسبية إلى عنوان URL لمستند HTML، لا إلى شعورك أين «يجب» أن يكون الملف.

التخزين المؤقت قد يخفي التحديثات

غالبًا ما تخزّن المتصفحات أيقونات المفضلة بقوة. تغيّر favicon.png، وتعيد التحميل، وما زلت ترى علامة الأمس. ذلك لا يعني دائمًا أن HTML خاطئ. جرّب تحديثًا قويًا، أو نافذة خاصة/متخفية، أو أعد تسمية الملف مؤقتًا وحدّث href حتى يجلب المتصفح عنوان URL جديدًا. علّم هذه العادة مبكرًا حتى لا يحذف المتعلمون ترميزًا يعمل بدافع الذعر.

اجعل الأيقونات صغيرة وواضحة

صورة ضخمة مضغوطة في تبويب تتحول إلى ضبابية غير مقروءة. فضّل علامة بسيطة وتباينًا عاليًا ولوحة مربعة. أيقونة المفضلة وسيلة تمييز، وليست صورة بطولة ثانية. احفظ العلامة التجارية التفصيلية لجسم الصفحة.

أين ينتمي الرابط

ضع عناصر link الخاصة بأيقونة المفضلة في head. وضعها في body مكان خاطئ لأيقونات على مستوى المستند. تعرف أصلًا أن head للبيانات الوصفية وروابط الموارد؛ أيقونات المفضلة تتبع تلك القاعدة.

تدرب في محررك

ضع أيقونة مربعة صغيرة بجانب ملف HTML أو داخل مجلد images.
أضف <link rel="icon" href="..."> داخل head بمسار مطابق.
افتح الصفحة وانظر إلى تبويب المتصفح بجانب نص العنوان.
اكسر المسار عمدًا، أعد التحميل، ولاحظ اختفاء الأيقونة أو رجوعها — ثم أصلحها.
استبدل ملف الأيقونة، وإذا علقت القديمة، افتح نافذة خاصة أو حدّث بقوة لتأكيد الفن الجديد.

أخطاء سهلة

وضع link الخاص بأيقونة المفضلة في body بدل head
href خاطئ فيؤدي إلى 404 للأيقونة بينما يبدو HTML الصفحة سليمًا
توقع تحديث مرئي فوري بينما أيقونة قديمة مخزّنة مؤقتًا
استخدام صورة فوتوغرافية ضخمة بدل علامة مربعة صغيرة وبسيطة
نسيان رفع ملف الأيقونة عند نشر HTML فقط
الخلط بين rel="stylesheet" وrel="icon" والتساؤل لماذا يختل CSS أو أيقونة التبويب

ملخص

تُربط أيقونات المفضلة في head بـ rel="icon"
وجّه href إلى ملف .ico أو .png أو .svg حقيقي
المسارات الصحيحة وفحص التخزين المؤقت بهدوء يحلّان معظم تقارير «الأيقونة المفقودة»
اجعل الأيقونات صغيرة وقابلة للتمييز بحجم التبويب
رابط واحد يعمل أفضل من كومة صيغ أيقونات غير مستخدمة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة