2

هل meta لل favicon صحيحة؟

  • مجهول

السلام عليكم ورحمة الله وبركاته

ارغب بمعرفة هل meta لل favicon صحيحة، وهل يوجد / اغلاق في الآخر او لا تؤثر لاني بلاحظ بعض المواقع تضعها والبعض الآخر لا

    <!--favicon-->
    <link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="24x24" href="assets/favicon-24x24.png" />
    <link rel="apple-touch-icon" sizes="210x180" href="images/logo.png" />
    <!--/favicon-->
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
Mustafa_Suleiman أضف ردا

لا يوجد meta tag خاص بال favicon، بل يتم إضافتها باستخدام عنصر link كما فعلت أنت، ولا يوجد إغلاق لعنصر link  فهو عنصر ذاتي الاغلاق self-closing ولا يحتاج إلى إغلاق.

والـ favicon ليست إلزامية، تستطيع استخدام link واحد فقط لـ favicon الأساسي، أو استخدام مقاسات مختلفة لضمان عرضها بشكل صحيح على مختلف الأجهزة.

لكن الأفضل هو استخدام الـ SVG وستحتاج إلى إضافة رابط واحد فقط لأن SVG قابل لتغيير حجمه ويظهر بكل وضوح على عكس الـ PNG.

<link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">
<!-- Fallback favicon in case a browser does not support the SVG version -->
<link rel="alternate icon" type="image/x-icon" href="favicon.ico">

أيضًا تستطيع تحويل الصورة إلى سلسلة نصية Base64 لتوفير طلب HTTP  واحد للخادم أي تحميل أسرع للصفحة:

<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">

ابحث عن svg to base64

0
مجهول أضف ردا

شكرا الك اخي

1
moatef أضف ردا

وعليكم السلام ورحمة الله وبركاته.

نعم الأكواد التي أرسلتها صحيحة ولا توجد بها أى أخطاء . حيث السطر الأول سيكون الصورة favicon الرئيسية له .

أما السطر الأخرى فأنت تحدد احجام كل صورة والمسار الخاص بها وهذا جيد حيث يغطي جميع الاحتياجات الأساسية المتعلقة بال favicon .

وأيضا لاحظت أنك تستخدم إمتداد ico. هو جيد حيث يدعم المتصفحات القديمة ولكن يفضل حاليا إستخدام صورة مثل PNG وغيرها . ولكن الأفضل من هذا هو إستخدام صيغة SVG حيث تدعم جميع المتصفحات وأيضا لها القابلية لتغير الأحجام والأبعاد دون الإخلال أو التغير في الجودة . وستقوم فقط بكتابة أول سطر فقط من الأكواد التي أرسلتها .

أيضا أنت لست بحاجة إلى إغلاق الوسم حيث link هو وسم فارغ (self-closing tag) في HTML

0
مجهول أضف ردا

شكرا الك اخي لكن هل يوجد مشكلة في الكود حال اغلقته؟

1
moatef أضف ردا

لا توجد أى مشكلة . ولكن يفضل الإلتزام بمعايير HTML حتى لا تحدث أى مشكلة غير متوقعة في المتصفح .

وإليك الرابط الرسمي للعنصر link وستجد أنه يستخدم / دون الحاجة إلى إستخدام وسم إغلاق.

<link href="main.css" rel="stylesheet" />