اذهب إلى المحتوى
  • 0

كيف تظهر أيقونة بنفس شعار الموقع بجوار العنوان في اعلى المتصفح؟

mphone

السؤال

Recommended Posts

  • 2

إنها مسألة في غاية البساطه.
هذا عن طريق استخدام الوسم LINK مع اضافة سمة العلاقة REL وسمة الرابط او المسار HREF ونوع الملف إذا كان صوره او ايقونة TYPE
 

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


لنرى مثال كامل:

<!DOCTYPE html>
<html>
    <head>
        <title>أكاديمية حسوب</title>
        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    </head>
    <body>
        محتويات الموقع
    </body>
</html>

هذا مثال بسيط يوضح المكان الصحيح الذي يتم وضع وسم link بهِ وهو بداخل الوسم head ولا يُنصح بوضعه خارج هذا الوسم لان هذا هو مكانه الصحيح.

وكما ترى قمنا بوضع سمة rel ومحتواها هو shortcut ثم مسافة icon وتعني هذه الكلمات انها علاقة طريقة مختصره لرمز او لأيقونة.

ثم استخدما href لجلب الصوره او الأيقونه التي ستظهر بجانب عنوان الموقع وغالباً يكون المسار هو ./favicon.ico وهذا اﻷسم افتراضي وليس اجباري ولكن انصح بتسميته هكذا ووضعه بجوار الملف الأساسي لموقعك index.html ولا تضعهُ بداخل مجلد آخر على سبيل المثال img/favicon.ico. لماذا؟! هذا ﻷن المتصفحات الحديثة تقوم بالبحث تلقائي عن مسار هذه اﻷيقونه لوضعها كشعار بجانب عنوان الموقع إذا كنت نسيت او تعمدت عدم وضع هذا الوسم المسؤل عن اظهار تلك اﻷيقونه.

ثم type التي تحتوي على هذا النوع image/x-icon وهذا ليس إلزامي ويمكنك تجاهل هذه النقطه.

من فضلك تفقد الملف المُرفق
 favicon.zip

تم التعديل في بواسطة Waleed Awad
الأخطاء الإملائية
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...