الأيقونة المفضلة - HTML Favicon
الأيقونة المفضلة هي صورة صغيرة تُعرض بجانب عنوان الصفحة في علامة تبويب
المتصفح.
كيفية إضافة الأيقونة المفضلة - HTML Favicon
يمكنك استخدام أي صورة تريدها كرمز مفضل خاص بك. يمكنك أيضًا إنشاء الأيقونة المفضلة الخاصة بك على مواقع مثل https://favicon.cc.
يتم عرض صورة الأيقونة المفضلة على يسار عنوان الصفحة في علامة تبويب المتصفح ، على النحو التالي:
مثال على الأيقونة المفضلة
كيفية إضافة الأيقونة المفضلة - HTML Favicon
يمكنك استخدام أي صورة تريدها كرمز مفضل خاص بك. يمكنك أيضًا إنشاء الأيقونة المفضلة الخاصة بك على مواقع مثل https://favicon.cc.
نصيحة: الأيقونة المفضلة هي صورة صغيرة ، لذا يجب أن تكون صورة بسيطة ذات
تباين عالٍ.
يتم عرض صورة الأيقونة المفضلة على يسار عنوان الصفحة في علامة تبويب المتصفح ، على النحو التالي:
مثال على الأيقونة المفضلة
لإضافة رمز مفضل إلى موقع الويب الخاص بك ، قم إما بحفظ صورة الأيقونة المفضلة في الدليل الجذر لخادم الويب الخاص بك ، أو قم بإنشاء مجلد في الدليل الجذر يسمى الصور ، واحفظ صورة الرمز المفضل في هذا المجلد. الاسم الشائع لصورة الأيقونة المفضلة هو "favicon.ico".
بعد ذلك ، أضف عنصر <link> إلى ملف "index.html" ، بعد عنصر <title> ، على النحو التالي:
مثال
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>الآن ، احفظ ملف "index.html" وأعد تحميله في متصفحك. يجب أن تعرض علامة تبويب المتصفح الآن صورة الأيقونة المفضلة على يسار عنوان الصفحة.
دعم تنسيق ملف favicon
يوضح الجدول التالي دعم تنسيق الملف لصورة الأيقونة المفضلة:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
ملخص الفصل
- استخدم عنصر <link> لإدراج رمز مفضل