إضافة رمز مفضل Favicon لصفحات موقعك HTML
سوف نتحدث في درسنا هذا و نتعرف على العنصر link من نوع icon, من خلال هذا العنصر يُمكنك أن تقوُم بتحديد الأيقونة التي تظهَر أعلى شريط title في صفحة الويب, إضافة رمز مفضل Favicon لصفحات موقعك HTML.
أما إذا كان لديك ملف صورة يحتوي على الأيقونة مثل "PNG" أو "SVG"، فيمكنك استخدام العنصر "link" على النحو التالي:
<link rel="icon" type="image/png" href="path/to/icon.png"> .
يجب استبدال "path/to/icon-font.woff" أو "path/to/icon.png" بمسار الملف الفعلي لملف الأيقونة على الخادم الخاص بك, إضافة رمز مفضل Favicon لصفحات موقعك HTML.
أو الأيقونة في حال قُمت بنشر موقعك على الإنترنت بمحركات البحث سيتم عرضها بجانب رابط موقعك بدل علامة الكرة الأرضية التي تكون إفتراضية بحال لم تحدد أيقونة له, أو الأيقونة عندما يقوم شخص ما بمشاركة رابط الموقع الخاص بك في مواقع التواصل تظهَر هذه الايقونة كصورة للموقع, إضافة رمز مفضل Favicon لصفحات موقعك HTML.
<head>
<link rel="icon" href="img/lgoo.jpg" />
</head>قُمنا بإضافة الوسم link ضمن الـ head ووضعنا rel ثم أعطيناه القيمة icon من أجل تحديد الأيقونة بجانب إسم الموقع في title ثم إستخدمنا href لتحديد مسار الصورة و الصورة هنا موجودة ضمن مجلد إسمه img ثم إسم الصورة و إمتدادها, الأفضل أن تكون صور الأيقونة محصور إمتدادها jpg أو png كإختيار أفضل, و عندما نقوم بتشغيل الكود السابق في المتصفح سوف يظهر لنا بالشكل الآتي, إضافة رمز مفضل Favicon لصفحات موقعك HTML
عرض الأيقونة على جميع المتصفحات إضافة رمز مفضل Favicon لصفحات موقعك HTML
لضمان عرض هذه الأيقونة بجميع محركات البحث و أيضاً الأجهزة التي تعمل بنظام apple توجد عدة قيم للقيام بهذا الأمر بسهولة فقط نقوم بنسخ السطر السابق مرتين ووضع القيم به, سوف نجمعها لكم بالكود الآتي, إضافة رمز مفضل Favicon لصفحات موقعك HTML .
<head>
<!-- لاجل باقي محركات البحث -->
<link rel="icon" href="img/lgoo.jpg" />
<link rel="shortcut" href="img/lgoo.jpg" />
<!-- لاجل اجهزة ابل -->
<link rel="apple-touch-icon" href="img/lgoo.jpg" />
</head>قُمنا بإضافة الوسم link ضمن الـ head ووضعنا rel ثم أعطيناه القيمة icon من أجل تحديد الأيقونة بجانب إسم الموقع في title ثم إستخدمنا href لتحديد مسار الصورة و الصورة هنا موجودة ضمن مجلد إسمه img ثم إسم الصورة و إمتدادها, ثم قمنا بنسخ السطرين و إستبدال القيمة icon في السطر الثاني إلى shortcut من أجل متصفحات البحث جميعها, إضافة رمز مفضل Favicon لصفحات موقعك HTML و في السطر الثال وضعنا القيمة apple-touch-icon من أجل عرضها على أجهزة شركة apple, إضافة رمز مفضل Favicon لصفحات موقعك HTML.
كما يمكننا وضع الصورة مباشرتاً بمجلد العمل و ليس إنشاء مجلد img خاص بالصور و إستدعاءها بإسمها و إمتدادها فقط, لكن الأفضل جعل الصور بمجلد img بحيث إذا كان موقعك كبير تكون الصور مرتبه بمجلد.
و أيضاً يُمكن تحديد أيقونات متعددة و مختلفة لكل صفحة من صفحات الموقع الخاص بك, بحيث كل صفحة يتم تحويل الزائر لها يتم عرض أيقونة مختلفة عن أيقونة باقي الصفحات, إضافة رمز مفضل Favicon لصفحات موقعك HTML.