Mustafa Suleiman

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

لم يتم التطرق للتعامل مع التواريخ في مسار أساسيات PHP، تلك من المفاهيم التي ستحتاج إلى تعلمها لاحقًا عند الحاجة إليها في المشاريع، وعامًة الأمر يتم من خلال كائن DateTime والدوال التي يوفرها. وفي لارافل، التعامل مع التواريخ يختلف قليلاً عن PHP لكونه يوفر أدوات ومكتبات تُسهل العملية، من خلال مكتبة Carbon التي تأتي مدمجة معه، وبالطبع يظل المبدأ الأساسي للتعامل مع التواريخ مبنيًا على PHP من خلال كائن DateTime، ولكنه يضيف طبقة من التبسيط. ستجد درس هنا يوضح لك كيفية التعامل مع التواريخ: وفي حال واجهت صعوبة في استيعاب أمر ما تستطيع السؤال.

لا تشغل بالك بكل ما عليك تعلمه فتصاب بالإحباط، المهم هو الاستمرارية والتركيز فيما عليك فعله حاليًا، اللغة الإنجليزية مهمة بالطبع فهي لغة العصر حاليًا ولا غنى عنها وستحتاجها لدراسة أمور متقدمة في مجال البرمجة، المهم هو الوصول لمستوى تستطيع من خلال القراءة والاستماع لفهم الشروحات وقراءة المصادر، والتحدث يأتي لاحقًا. أما في مقابلات العمل في الشركات طالما تستطيع تعريف نفسك والإجابة على بعض الأسئلة المعروفة والتي تستطيع تجهيز إجابة مُسبقًا لها لو بحثت عن أسئلة مقابلات العمل، فلا مشكلة فباقي المقابلة باللغة العربية. لكن بعض الشركات أحيانًا المقابلة بها بالإنجليزية بالكامل، لذا حاول السؤال عنها. أما على مواقع العمل الحر فلديك مستقل وخمسات وبعيد فكلها منصات عربية. لتحسين اللغة حاول تخصيص ساعتين يوميًا للتعلم والممارسة وضع 100 تحت الممارسة لتحسين مهارتي الاستماع والقراءة أولاً.

بدون توضيح لما تريده ستحصل على إجابة عامة، ما هو التخصص البرمجي الذي اخترته هل هو Full-Stack؟ وأيضًا طالما اخترت دورة إدارة تطوير المنتجات فأنت مُهتم بالجانب الإداري للمشاريع والتعرف على تطوير المشاريع من منظور الـ Business وليس من خلال الكود فقط، وذلك من شأنه إفادتك لتطوير مشاريع تخدم الواقع العملي سواء من كنت مبرمج أو قائد لفريق عمل تقني. في الفترة القادمة لمدة عام ما الذي تنوي فعله؟

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

في المرات القادمة، ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم أسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل. عامًة لا يجب تخطي أحد الدروس المتعلقة بالأساسيات وبالأخص مفهوم هام مثل return في لغات البرمجة، تستطيع السؤال وسيتم توضيح ذلك المفهوم لك، فبعض المسارات أو الدروس يمكن تخطيها لا مشكلة لكن الأمر يعتمد على الدورة، والأفضل بالطبع دراسة كامل الدورة للاستفادة. وببساطة، return نستخدمها لإنهاء تنفيذ الدالة فورًا وإرجاع قيمة أو None في حال لم تُحدد قيمة، وبمجرد أن تصل الدالة إلى جملة return، يتوقف تنفيذها تمامًا، وأي كود يأتي بعد return داخل نفس الدالة لن يتم تنفيذه. لكن ما معنى إرجاع قيمة؟ ستجد تفصيل هنا:

ستشعر بذلك في حال كان الموقع بسيط، أي أنّ الأداة معقدة بالنسبة لمشروع بسيط لا يتطلبها، لذا لن تجد لها فائدة وستضيف تعقيد غير ضروري. بينما لو المشروع مُعقد وتريد إدارة حالة به للبيانات وأيضًا تحديث البيانات بشكل ديناميكي في الواجهة وكذلك توفير تجربة مستخدم جيدة بتحديث البيانات دونّ إعادة تحديث الصفحة والتنقل بين صفحات التطبيق بكل سهولة وسرعة، فستجد أنّ تنفيذ ذلك من خلال HTML و جافاسكريبت يستغرق الكثير من الوقت ولن يكون بنفس جودة React وستحدث الكثير من المشاكل التي أنت في غنى عنها. في البداية ستجد أنّ React صعبة الاستخدام قليلاً لأنّ مفهوم التطوير من خلالها لم تستوعبه بشكل كامل، ومع الوقت والممارسة ستتضح لك الكثير من الأمور.

لا حاجة لكل ذلك، المشكلة أنك تستخدم بيئات تطوير قديمة وتحدث بها الكثير من المشاكل، الأفضل استخدام بيئات تطوير حديثة مثل Laragon والأحدث منها هي FlyEnv.

لا يتوفر captions للدروس أو مُلخصات، لكن تستطيع تشغيلها والاستماع إليها في الخلفية بالنسبة للدروس النظرية. لكن تستطيع الإعتماد على المقالات المتاحة في أكاديمية حسوب وأيضًا المراجع الموجودة في موسوعة حسوب لمختلف اللغات. إذا أردت ملخص للغة أو إطار معين أو مكتبة تستطيع البحث عن cheat sheet ثم اسم اللغة مثلاُ وليكن js إذا ستبحث عن cheat sheet for js.

Node.js خاصة بالواجهة الخلفية وهي بيئة تشغيل لجافاسكريب خارج المتصفح، لذا هي تعتمد على جافاسكريبت بالفعل وبدونها لن تتمكن من تطوير واجهة خلفية من خلال جافاسكريبت. أظن أنك تقصد تطوير الواجهة الأمامية فقط من خلال جافاسكريبت وتستطيع بالطبع لا مشكلة، ستحتاج إلى React لتسهيل العملية، لكن لكي يتمكن المستخدمين من مراسلة بعضهم يجب وجود واجهة خلفية

ذلك تم شرحه في دورة جافاسكريبت بالفعل، ستجده في مسار تطبيق دردشة يشبه WhatsApp، حيث سيتم التطوير من خلال React و Node.js لذا يجب إتمام المسارات التي قبله لتتمكن من دراسة ذلك المسار، وتستطيع تخطي مسار تطوير تطبيق جوال باستخدام React Native لكونه خاص بالهواتف وحاليًا أنت تريد تطوير تطبيق ويب للمتصفح.

تقصد تطبيق تواصل إجتماعي مثل فيسبوك؟ أم إضافة ميزة الدردشة بين مستخدمي الموقع من خلال غرف؟

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

ما تريده يُسمى animation on scroll أو Scroll-triggered Animations الأسهل لك استخدام مكتبة GSAP، تستطيع البحث على اليوتيوب عن GSAP ScrollTrigger، وعامًة إليك مثال، ستحتاج أولاً إلى تضمين المكتبة عبر روابط CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> ولنقم بالتطبيق على مثال بسيط: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GSAP Scroll Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="logo">Charlotte <span>Smith</span></div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section class="hero"> <div class="hero-text"> <p class="intro-line">Hey I'm</p> <h1 class="name-line">Charlotte Smith</h1> <p class="tagline">A Creative Web Developer & Designer.</p> </div> <div class="hero-image-container"> <div class="halo halo1"></div> <div class="halo halo2"></div> <div class="halo halo3"></div> <img src="https://avatar.iran.liara.run/public/73" alt="Charlotte Smith" class="profile-image"> </div> </section> <section class="spacer" style="height: 100vh; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> Scroll down to see effects </section> <section class="spacer" style="height: 100vh; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> More Content Here </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html> وكود CSS: body { margin: 0; font-family: sans-serif; background-color: #0a0a0a; color: #f0f0f0; overflow-x: hidden; /* لمنع التمرير الأفقي غير المرغوب فيه */ } header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; box-sizing: border-box; z-index: 100; background: rgba(10, 10, 10, 0.5); backdrop-filter: blur(5px); } .logo { font-size: 1.8em; font-weight: bold; } .logo span { color: #e60000; } nav ul { list-style: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-left: 30px; } nav ul li a { text-decoration: none; color: #f0f0f0; font-size: 1em; transition: color 0.3s ease; } nav ul li a:hover { color: #e60000; } .hero { min-height: 100vh; display: flex; align-items: center; justify-content: space-around; padding: 100px 50px 50px; box-sizing: border-box; position: relative; overflow: hidden; } .hero-text { flex-basis: 50%; padding-right: 50px; } .hero-text .intro-line { font-size: 2em; color: #aaa; margin-bottom: 0; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-text .name-line { font-size: 4em; font-weight: bold; color: #fff; margin-top: 0; margin-bottom: 10px; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-text .tagline { font-size: 1.5em; color: #ccc; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-image-container { flex-basis: 40%; position: relative; display: flex; justify-content: center; align-items: center; } .profile-image { max-width: 70%; height: auto; border-radius: 50%; z-index: 5; position: relative; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: scale(0.8) translateX(50px); } .halo { position: absolute; border-radius: 50%; background-color: rgba(220, 0, 0, 0.2); opacity: 0; transform: scale(0.5); z-index: 1; } .halo1 { width: 100%; padding-bottom: 100%; max-width: 400px; max-height: 400px; z-index: 3; background-color: rgba(220, 0, 0, 0.15); } .halo2 { width: 120%; padding-bottom: 120%; max-width: 480px; max-height: 480px; z-index: 2; background-color: rgba(220, 0, 0, 0.1); } .halo3 { width: 140%; padding-bottom: 140%; max-width: 560px; max-height: 560px; z-index: 1; background-color: rgba(220, 0, 0, 0.05); } /* إخفاء العناصر قبل تحميل GSAP للتحكم بظهورها */ .logo, nav ul li { opacity: 0; } ثم كتابة كود جافاسكريبت باستخدام GSAP وقمت بإضافة تعليقات لشرح ما يحدث: // تسجيل إضافة ScrollTrigger gsap.registerPlugin(ScrollTrigger); // 1. تحريكات عند تحميل الصفحة (بدون ScrollTrigger مبدئياً) // ----------------------------------------------------- const tlOnLoad = gsap.timeline({ defaults: { ease: "power2.out" } }); tlOnLoad .from(".logo", { opacity: 0, x: -30, duration: 0.8, delay: 0.2 }) .from("nav ul li", { opacity: 0, y: -20, stagger: 0.1, duration: 0.5 }, "-=0.5") // يبدأ مع اللوجو تقريباً .to(".hero-text .intro-line", { opacity: 1, y: 0, duration: 0.8, delay: 0.3 }) .to(".hero-text .name-line", { opacity: 1, y: 0, duration: 0.8 }, "-=0.5") // يبدأ بعد النص التمهيدي بقليل .to(".hero-text .tagline", { opacity: 1, y: 0, duration: 0.8 }, "-=0.6") .to(".profile-image", { opacity: 1, scale: 1, x: 0, duration: 1 }, "-=0.8") // الصورة تظهر .to(".halo", { // الهالات تظهر بشكل متتالي opacity: 1, scale: 1, duration: 1.2, stagger: 0.2, // تأخير بين كل هالة ease: "elastic.out(1, 0.5)" }, "-=0.7"); // 2. تحريكات عند التمرير (ScrollTrigger) // -------------------------------------- // مثال: تأثير parallax على الصورة عند التمرير gsap.to(".profile-image", { yPercent: -30, // تحريك الصورة لأعلى بنسبة 30% من ارتفاعها ease: "none", scrollTrigger: { trigger: ".hero", // العنصر الذي يبدأ عنده التأثير start: "top top", // متى يبدأ (عندما يصل أعلى الـ .hero إلى أعلى الـ viewport) end: "bottom top", // متى ينتهي (عندما يصل أسفل الـ .hero إلى أعلى الـ viewport) scrub: true, // يجعل الحركة متزامنة مع التمرير (true أو رقم لـ "تنعيم" الحركة) // markers: true // لإظهار علامات تساعد في تحديد نقاط البدء والنهاية (للتطوير فقط) } }); // مثال: تأثير parallax على الهالات (بسرعات مختلفة) gsap.utils.toArray(".halo").forEach((halo, i) => { gsap.to(halo, { yPercent: -20 * (i + 1), // كل هالة تتحرك أسرع قليلاً scale: 1.1 + (i * 0.1), // تكبير قليل مع التمرير opacity: 0.5 - (i * 0.1), // تتلاشى قليلاً مع التمرير ease: "none", scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: 1.5, // تنعيم أكثر // markers: {startColor: "blue", endColor: "blue", indent: 40 * i} } }); }); // مثال: تلاشي نصوص الـ hero عند التمرير لأسفل gsap.to(".hero-text", { opacity: 0, yPercent: -50, // تحريك النص لأعلى ease: "power1.in", scrollTrigger: { trigger: ".hero", start: "center center", // عندما يصل منتصف الـ .hero إلى منتصف الـ viewport end: "bottom center", // عندما يصل أسفل الـ .hero إلى منتصف الـ viewport scrub: 1, // markers: {startColor: "green", endColor: "green"} } }); // مثال: تغيير خلفية الهيدر عند التمرير (إذا لم يكن fixed بالفعل) // أو تثبيت الهيدر بعد تجاوز قسم معين ScrollTrigger.create({ trigger: ".hero", // يمكن أن يكون body أو أي عنصر آخر start: "bottom top", // عندما يتجاوز أسفل قسم الـ hero أعلى النافذة toggleClass: { targets: "header", className: "scrolled" }, // أضف كلاس CSS // markers: true, onEnter: () => console.log("Header scrolled class added"), onLeaveBack: () => console.log("Header scrolled class removed") });

هل تقصد فعليًا؟ أم كود HTML كشكل فقط؟ سأفترض HTML لأنّ بوابة الدفع أمر متقدم ويحتاج إلى استخدام أحد مزودي الخدمة مثل stripe وغيره. سيكون الكود كالتالي: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>نموذج بطاقة ائتمان</title> <style> body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f4; margin: 0; } .credit-card-form { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 350px; } .credit-card-form h2 { text-align: center; color: #333; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } .form-group input[type="text"], .form-group input[type="number"], /* أو tel للوحة مفاتيح رقمية أفضل على الجوال */ .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; /* لتضمين padding و border ضمن العرض الكلي */ } .expiry-group { display: flex; gap: 10px; } .expiry-group .form-group { flex: 1; } .submit-btn { width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .submit-btn:hover { background-color: #0056b3; } </style> </head> <body> <div class="credit-card-form"> <h2>نموذج إدخال بيانات بطاقة ائتمان</h2> <form action="#" method="POST" onsubmit="alert('تم إرسال النموذج (للعرض فقط، لم يتم إرسال أي بيانات فعلية أو معالجتها)!'); return false;"> <div class="form-group"> <label for="card-number">رقم البطاقة:</label> <input type="text" id="card-number" name="cardNumber" placeholder="xxxx xxxx xxxx xxxx" pattern="\d{4} ?\d{4} ?\d{4} ?\d{4}" maxlength="19" required> </div> <div class="form-group"> <label for="card-holder">اسم صاحب البطاقة:</label> <input type="text" id="card-holder" name="cardHolder" placeholder="الاسم كما يظهر على البطاقة" required> </div> <div class="expiry-group"> <div class="form-group"> <label for="expiry-month">شهر انتهاء الصلاحية:</label> <select id="expiry-month" name="expiryMonth" required> <option value="">اختر الشهر</option> <option value="01">01 - يناير</option> <option value="02">02 - فبراير</option> <option value="03">03 - مارس</option> <option value="04">04 - أبريل</option> <option value="05">05 - مايو</option> <option value="06">06 - يونيو</option> <option value="07">07 - يوليو</option> <option value="08">08 - أغسطس</option> <option value="09">09 - سبتمبر</option> <option value="10">10 - أكتوبر</option> <option value="11">11 - نوفمبر</option> <option value="12">12 - ديسمبر</option> </select> </div> <div class="form-group"> <label for="expiry-year">سنة انتهاء الصلاحية:</label> <select id="expiry-year" name="expiryYear" required> <option value="">اختر السنة</option> <!-- تستطيع إضافة المزيد من السنوات هنا باستخدام JavaScript إذا أردت --> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> </select> </div> </div> <div class="form-group"> <label for="cvv">CVV/CVC:</label> <input type="text" id="cvv" name="cvv" placeholder="123" pattern="\d{3,4}" maxlength="4" required> </div> <button type="submit" class="submit-btn">إرسال (تجريبي)</button> </form> </div> </body> </html>

Linear أو Polynomial Regression مع الوقت كمتغير وحيد ليس خطأ بالمعنى الرياضي، لكنه ضعيف علميًا كأداة تنبؤ في السلاسل الزمنية لأنك تفترض ضمنيًا أنّ ما كان يحدث سيستمر بلا تغيير. فنماذج السلاسل الزمنية ARIMA, ETS, Prophet, AutoTS وغيرهم مبنية خصيصًا للتعامل مع الخصائص التي تُميز البيانات الزمنية، أي الاعتماد الذاتي Autocorrelation، الموسمية Seasonality، عدم الثبات Non-stationarity، والصدمات البنيوية Structural breaks. بالتالي بإمكانك إعتبار ARIMA وغيره على أنه انحدار أيضًا ولكن على متغيرات مشتقة وهي الفروق، القيم المتأخرة وخلافه، وبآلية تحقق من صلاحية الفرضيات الإحصائية stationarity, white noise إلخ.

ملف index.php الخاص بـ WampServer الموجود في C:\wamp64\www يقوم بتحميل ملف آخر اسمه apacheloadedmodules.php من المسار ../files/ أي المسار التالي: C:\wamp64\files\apacheloadedmodules.php ولكن لا يجده، هل تم التثبيت بشكل صحيح؟ حاول تثبيت Microsoft Visual C++ Redistributable اللازمة لتثبيت WampServer https://aka.ms/vs/17/release/vc_redist.x64.exe ثم أعد تثبيت WampServer.

خاصية content داخل @keyframes تعمل بشكل أساسي مع العناصر الزائفة pseudo-elements مثل ::before و ::after بالتالي عند تطبيقها مباشرة على عنصر label، فلن تغير محتواه النصي الفعلي. ستحتاج إلى استخدام عنصر زائف ::after مع العنصر label، وتطبيق الأنيميشن عليه. .typewriter-text { color: #6d8a6d; font-weight: bold; margin-left: 5px; } .typewriter label::after { content: ""; animation: read 4s infinite; } @keyframes read { 0%, 20% { content: "Web Developer"; } 25%, 45% { content: "Youtuber"; } 50%, 70% { content: "Developer"; } 75%, 95% { content: "Script writer"; } 100% { content: "Script writer"; } } لو استمرت المشكلة أرفق المشروع لديك لتفقده

بل تعديلات متفرقة في كامل الملف، ذلك تعليق فقط للتوضيح للفصل بين التنسيقات للتسهيل وذلك ما يجب فعله عند التطوير، حيث كل قسم تضع تعليق لتوضيح التعليقات الخاصة به، الـ Main Section هو القسم الذي يلي الـ navbar أي الذي به الصورة والنص

صحيح لازمة لعرض الموقع بشكل جيد، تستطيع إزالتها ثم تفقد الموقع لتفقد ما تُضيفه للتنسيق، ثم إعادتها بالضغط على CTRL + Z للتراجع

أرجو توضيح ذلك في وصف المشكلة، لديك مشكلة في المُحددات الخاصة بـ CSS بمعنى عند كتابة تنسيق يجب إختيار العنصر الصحيح لتنسيقه، فبدلاً من كتابة .navbar-container.links الصحيح هو كتابة التالي حيث أن links تقع خارج عنصر div الذي به كلاس navbar-container، للتوضيح .navbar-container.links تعني حدد لي جميع العناصر ذات كلاس links والتي تقع داخل عنصر أب يحمل كلاس باسم navbar-container. .links نفس الأمر بالنسبة لباقي التنسيقات، يجب أن تتوافق مع هيكل HTML لديك، قمت بتصحيحها لك أرجو تففقدها ومقارنتها بما لديك لتكتشف الأخطاء. index.css

هل الخلفية كما بالصورة تظهر لديك؟ وهل عند تغيير لون خلفية عنصر body لا يتم التغيير؟ عليك إعادة التحديث للصفحة لرؤية التغييرات.

التنسيقات يتم تنفيذها بشكل سليم، حاول إعادة تحديث الصفحة ثم التجربة:

هل عند الضغط على CTRL + 0 يتم ضبط التقريب Zoom للمستوى الطبيعي أم لا؟

ما تقصده هو Favicon أو أيقونة المُفضلة، الصيغة الأفضل للصورة هي ICO، ولكن لا مشكلة في استخدام PNG أو JPG أيضًا. والحجم المناسب هو 16x16 أو 32x32 بكسل، ولكن لدعم الأجهزة التي بها شاشة عالية الدقة مثل Retina نستخدم أحجام أكبر مثل 64x64 أو 180x180 بكسل. استخدم الموقع التالي للحصول على صورة، تستطيع من خلاله تحويل png إلى ico أو الحصول على صورة icon من خلال كتابة اسم الموقع فقط أو تستطيع استخدام emoji وسيتم تحويله إلى ico https://favicon.io ثم تضمين الصورة من خلال عنصر link بداخل عنصر head كالتالي: <head> <link rel="icon" type="image/x-icon" href="/favicon.ico"> </head> بالطبع عليك تعديل اسم ومسار الصورة في وسم href لما لديك أنت.