mphone نشر 16 يوليو 2015 أرسل تقرير نشر 16 يوليو 2015 مازلتُ أتعلم لُغة HTML واُريد معرفة من أين تأتي هذهِ الصورة او الأيقونة التي تظهر بجانب عنوان الموقع في التبويبه بأعلى المتصفح؟ 1 اقتباس
2 عبدالرحمن احمد16 نشر 16 يوليو 2015 أرسل تقرير نشر 16 يوليو 2015 (معدل) إنها مسألة في غاية البساطه.هذا عن طريق استخدام الوسم 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 تم التعديل في 21 يوليو 2015 بواسطة Waleed Awad الأخطاء الإملائية 5 اقتباس
0 حامد الحازمي نشر 17 مارس أرسل تقرير نشر 17 مارس طريقة اظهار ايقونة الموقع في جميع الاقسام عندي ماتظهر عند ارسال الرابط في الواتس مثال https://www.ejob3.com/jobs/archive/8 1 اقتباس
0 Mustafa Suleiman نشر 17 مارس أرسل تقرير نشر 17 مارس بتاريخ 11 دقائق مضت قال حامد الحازمي: طريقة اظهار ايقونة الموقع في جميع الاقسام عندي ماتظهر عند ارسال الرابط في الواتس مثال https://www.ejob3.com/jobs/archive/8 منصات التواصل والتطبيقات لا تعتمد على أيقونة المُفضلة Favicon فقط، بل تبحث عن أكواد برمجية محددة وهي Open Graph Meta Tags داخل كل صفحة. يجب أن تتواجد تلك الأكواد داخل وسم <head> في موقعك بحيث تظهر في جميع الصفحات أي الصفحة الرئيسية والأقسام الفرعية، ومن المفترض أن تكون ديناميكية لتتغير حسب كل قسم، لكن الأهم هو كود الصورة. <meta property="og:title" content="عنوان القسم أو الوظيفة هنا" /> <meta property="og:description" content="وصف مختصر للقسم أو الصفحة" /> <meta property="og:image" content="https://www.ejob3.com/path/to/your-image.jpg" /> <meta property="og:url" content="https://www.ejob3.com/jobs/archive/8" /> <meta property="og:type" content="website" /> و كود og:image: يجب أن يكون الرابط مباشر للصورة، ويبدأ بـ https، وينتهي بصيغة صورة صالحة مثل .jpg أو .png أو .webp والأفضل webp لأن حجم الصور سيكون صغير وستتجنب مشكلة عدم ظهورها بسبب حجم الصورة الكبير أي أكبر من 300 كيلوبايت. وفي حال الموقع تم تطويره من خلال ووردبريس فيوجد إضافات لتنفيذ ذلك بسهولة وبشكل ديناميكي. اقتباس
0 حامد الحازمي نشر 18 مارس أرسل تقرير نشر 18 مارس تسلم اخي مصطفى بس المشكلة حتي الان موجودة تم ارفاق صور للمطلوب عندي الاقسام ماتظهر عند ارسال الرابط الشعار اقتباس
0 محمد عاطف25 نشر 16 أبريل أرسل تقرير نشر 16 أبريل بتاريخ On 18/3/2026 at 18:32 قال حامد الحازمي: بس المشكلة حتي الان موجودة تم ارفاق صور للمطلوب عندي الاقسام ماتظهر عند ارسال الرابط الشعار لاحظ المشكلة لديك هنا في كود الصفحة : انت لم تقم بوضع رابط للصورة الصحيحة حيث وضعت رابط خاطئ ولو ذهبت له سيعطي 404 . يجب وضع رابط لصورة صحيحة حتى تظهر ويجب بعد وضع الرابط الصحيح أن تظهر الصورة فمثلا هذه صفحة في الموقع تظهر الصورة لوجود رابط صحيح : اقتباس
السؤال
mphone
مازلتُ أتعلم لُغة HTML واُريد معرفة من أين تأتي هذهِ الصورة او الأيقونة التي تظهر بجانب عنوان الموقع في التبويبه بأعلى المتصفح؟
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.