تصميم شعار موقع يحتاج ملفاً متجهاً وأيقونة favicon ومقاسات مناسبة للهيدر والوضع الداكن. دليل تقني عملي لتجهيز الشعار وتطبيقه على موقعك بشكل صحيح.
آخر تحديث: 28 يوليو 2026
كيف تصمّم شعاراً يظهر بشكل صحيح على موقعك؟
شعار الموقع يحتاج ثلاث نسخ لا نسخة واحدة: نسخة أفقية للهيدر، ونسخة مربعة أو أيقونة للـ favicon وللسوشيال ميديا، ونسخة أحادية اللون للخلفيات الداكنة. وكلها يجب أن تُصدَّر من ملف متجه SVG حتى تبقى حادة على كل الشاشات.
أكثر خطأ يفسد شكل الموقع هو رفع شعار بصيغة صورة نقطية بعرض ثابت، فيظهر مشوشاً على شاشات الموبايل عالية الكثافة ويبطئ التحميل بلا داعٍ.
الخلاصة
- صدّر الشعار بصيغة SVG للهيدر لأنه يظل حاداً على أي كثافة شاشة وحجمه صغير جداً.
- جهّز أيقونة favicon مربعة مبسّطة، لأن الشعار الكامل يصبح غير مقروء في 32 بكسل.
- أعدّ نسخة بيضاء أو أحادية اللون للوضع الداكن، وإلا اختفى الشعار على الخلفية السوداء.
- ضع الشعار في الهيدر داخل رابط يعود للصفحة الرئيسية مع نص بديل باسم الشركة.
- حدد عرض وارتفاع الشعار في الكود لمنع اهتزاز الصفحة أثناء التحميل.
ما مقاسات وصيغ شعار الموقع الصحيحة؟
لكل موضع في الموقع متطلب مختلف. تجهيز الملفات مسبقاً يوفّر عليك جولات تعديل كاملة أثناء التنفيذ.
| الموضع | الصيغة المناسبة | ملاحظة |
|---|---|---|
| هيدر الموقع | SVG | ارتفاع عملي بين 32 و 48 بكسل على الشاشات الكبيرة |
| أيقونة التبويب favicon | SVG مع PNG احتياطي 32×32 | استخدم رمزاً مبسطاً لا الشعار الكامل |
| أيقونة الهاتف والتطبيق | PNG 180×180 و 512×512 | خلفية صلبة لا شفافة لتجنب ظهورها سوداء |
| صورة المشاركة على السوشيال | PNG أو JPG بمقاس 1200×630 | الشعار داخل تصميم لا وحده على خلفية بيضاء |
| الوضع الداكن | SVG أحادي اللون بالأبيض | يُبدَّل تلقائياً حسب سمة المتصفح |
| المطبوعات | AI أو PDF متجه | ملف منفصل عن نسخة الويب |
لماذا لا يصلح شعارك الكامل كأيقونة favicon؟
أيقونة التبويب تُعرض بحجم 16 إلى 32 بكسل، وهو حجم لا يكفي لاسم شركة مكتوب أو لتفاصيل دقيقة. النتيجة بقعة ملونة غير مفهومة تضيع بين عشرات التبويبات المفتوحة.
الحل هو اشتقاق رمز مبسّط من الشعار: الحرف الأول، أو الشكل الأساسي فيه، أو رمز مميز واحد. هذا الرمز يجب أن يظل مقروءاً بحجم 16 بكسل وبالأبيض والأسود.
- اختبر الأيقونة فعلياً بحجم 16 بكسل قبل اعتمادها، لا بحجم كبير على الشاشة.
- تجنب التدرجات اللونية والظلال في الأيقونة الصغيرة لأنها تتحول إلى تشويش.
- استخدم تبايناً عالياً بين الرمز والخلفية حتى يُميَّز على التبويب الفاتح والداكن.
- وفّر نسخة SVG للأيقونة، فالمتصفحات الحديثة تدعمها وتعطي أوضح نتيجة.
كيف يتعامل الشعار مع الوضع الداكن والاتجاه من اليمين لليسار؟
الشعار الملون على خلفية فاتحة قد يختفي تماماً في الوضع الداكن، خاصة إن كان نصه أسود أو رمادياً داكناً. الحل تجهيز نسخة ثانية بالأبيض وتبديلها تلقائياً حسب سمة المتصفح.
في المواقع العربية، انتبه لموضع الشعار: التخطيط من اليمين لليسار يضع الشعار في الجهة اليمنى من الهيدر. أما الشعار نفسه فلا يُعكس أبداً، لأن عكس النص اللاتيني أو الرمز يجعله خاطئاً بصرياً.
إذا كان الشعار يجمع نصاً عربياً ونصاً لاتينياً، فتأكد من صحة ترتيبهما في الملف المتجه نفسه، لأن اعتماد المتصفح على ترتيب النص قد يقلبهما في بعض الحالات.
خطوات تجهيز وتطبيق شعار الموقع
- احصل على الملف المتجه الأصلي للشعار بصيغة SVG أو AI.
- نظّف الملف المتجه من الطبقات الزائدة والنصوص غير المحوّلة إلى مسارات.
- صدّر نسخة أفقية للهيدر ونسخة أحادية اللون بالأبيض للوضع الداكن.
- اشتق رمزاً مبسطاً وصدّره كأيقونة favicon بصيغة SVG مع PNG احتياطي.
- صدّر أيقونات الهاتف بمقاسي 180×180 و 512×512 بخلفية صلبة.
- ضع الشعار في الهيدر داخل رابط للصفحة الرئيسية مع نص بديل باسم الشركة.
- حدد عرض وارتفاع الصورة في الكود لمنع اهتزاز التخطيط أثناء التحميل.
- اختبر الشعار على الموبايل وفي الوضعين الفاتح والداكن قبل الإطلاق.
أين يُوضع الشعار داخل صفحات الموقع؟
الشعار يظهر في أكثر من موضع داخل الموقع، وكل موضع يحتاج نسخة بمقاس وصيغة مختلفة. استخدام نسخة واحدة في كل المواضع هو سبب أن الشعار يبدو ممتازاً في مكان ورديئاً في آخر.
المواضع الستة التالية تغطي أغلب المواقع. جهّز نسخة مناسبة لكل واحد منها قبل الإطلاق بدل معالجتها واحدة تلو الأخرى بعد أن يلاحظها أحد.
- الهيدر أعلى كل صفحة: نسخة أفقية بصيغة SVG خفيفة، مرتبطة بالصفحة الرئيسية.
- التذييل: غالباً نسخة أحادية اللون تناسب خلفية داكنة.
- أيقونة التبويب favicon: نسخة مربعة مبسطة جداً تُقرأ في مقاس صغير للغاية.
- صورة المشاركة على مواقع التواصل: صورة بمقاس مناسب يظهر فيها الشعار مع اسم الصفحة.
- الفواتير والمستندات المطبوعة: نسخة عالية الدقة أو ملف متجه للطباعة.
- شاشة التحميل أو صفحة الخطأ: نسخة مبسطة تعمل على خلفية فاتحة وداكنة معاً.
أخطاء شائعة في تطبيق شعار الموقع
- رفع صورة PNG بعرض 1000 بكسل لعرضها بحجم 40 بكسل، فتزيد وزن الصفحة بلا فائدة.
- ترك الشعار بلا نص بديل، فيفقد الموقع إشارة مهمة لمحركات البحث ولقارئات الشاشة.
- استخدام نفس الشعار الملون في الوضع الداكن فيختفي أو يصبح غير مقروء.
- وضع الشعار كصورة خلفية في CSS، فلا يُقرأ ولا يُنقر ولا يُفهرس.
- نسيان أيقونة favicon تماماً، فيظهر الموقع في التبويبات برمز افتراضي بلا هوية.
اقرأ أيضاً
أسئلة شائعة
ما أفضل صيغة لشعار الموقع؟
الصيغة المتجهة SVG هي الأفضل لشعار الهيدر، لأنها تبقى حادة على أي كثافة شاشة وحجم ملفها صغير جداً مقارنة بالصور النقطية. احتفظ بنسخ PNG بخلفية شفافة للمواضع التي لا تدعم SVG مثل بعض عملاء البريد الإلكتروني.
ما مقاس أيقونة favicon الصحيح؟
جهّز أيقونة SVG مع نسخة PNG بمقاس 32×32 كاحتياطي، إضافة إلى أيقونة 180×180 لأجهزة الهاتف و 512×512 لتثبيت الموقع كتطبيق. المهم أن يكون الرمز مبسّطاً بحيث يظل مفهوماً بحجم 16 بكسل.
هل يجب عكس الشعار في المواقع العربية؟
لا. الشعار لا يُعكس أبداً حتى في التخطيط من اليمين لليسار، لأن عكسه يقلب النصوص والرموز ويجعلها خاطئة. ما يتغير هو موضع الشعار داخل الهيدر فقط، حيث ينتقل إلى الجهة اليمنى في التصميم العربي.
كيف أجعل الشعار يظهر بشكل صحيح في الوضع الداكن؟
جهّز نسخة ثانية من الشعار بالأبيض أو بلون فاتح، وبدّلها تلقائياً حسب سمة المتصفح باستخدام استعلام prefers-color-scheme. الاعتماد على نسخة واحدة ملونة يجعل الشعار يختفي أو يفقد وضوحه على الخلفية الداكنة.
هل الشعار يؤثر على سرعة الموقع؟
نعم إذا كان صورة نقطية كبيرة. شعار SVG نموذجي حجمه بضعة كيلوبايتات فقط، بينما صورة PNG بعرض 1000 بكسل قد تتجاوز مئات الكيلوبايتات لتُعرض بحجم 40 بكسل. تحديد الأبعاد في الكود أيضاً يمنع اهتزاز الصفحة أثناء التحميل.
نضبط شعارك على موقعك بشكل صحيح
إذا كان لديك شعار جاهز، أرسل لنا ملفه الأصلي وسنجهّز كل النسخ المطلوبة للموقع: الهيدر، والأيقونة، والوضع الداكن، وصور المشاركة على السوشيال ميديا ضمن تنفيذ المشروع.
اطّلع على أسعار وباقات إيجيبت كود — أو اطلب استشارة مجانية من إيجيبت كود ونرد عليك بعرض سعر وجدول زمني خلال 24 ساعة.