الفايكون هو صورة صغيرة تُعرض بجانب عنوان الصفحة في علامة التبويب الخاصة بالمتصفح.
كيفية إضافة فافيكون في HTML:
يمكنك استخدام أي صورة تريدها كفايكون. يمكنك أيضًا إنشاء فافيكون الخاص بك على مواقع مثل https://www.favicon.cc.
نصيحة: الفافيكون هو صورة صغيرة، لذلك يجب أن تكون صورة بسيطة ذات تباين عالٍ.
تظهر صورة الفافيكون إلى يسار عنوان الصفحة في علامة تبويب المتصفح، مثل هذا:
لإضافة الفافيكون إلى موقعك الإلكتروني، يمكنك إما حفظ صورة الفافيكون الخاصة بك في المجلد الجذر لمزود خدمة الويب الخاص بك، أو إنشاء مجلد في المجلد الجذر يسمى “images” وحفظ صورة الفافيكون الخاصة بك في هذا المجلد. اسم شائع لصورة الفافيكون هو “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” وأعد تحميله في المتصفح الخاص بك. يجب أن يعرض علامة تبويب المتصفح الآن صورة الفافيكون الخاصة بك إلى يسار عنوان الصفحة.
دعم تنسيق ملف الفافيكون
يوضح الجدول التالي دعم تنسيق الملف لصورة الفافيكون:
| متصفح | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | نعم | نعم | نعم | نعم | نعم |
| Chrome | نعم | نعم | نعم | نعم | نعم |
| Firefox | نعم | نعم | نعم | نعم | نعم |
| Opera | نعم | نعم | نعم | نعم | نعم |
| Safari | نعم | نعم | نعم | نعم | نعم |
