انتقل إلى المحتوى
أدواتأدوات
English
أدوات

كيف تسوي أيقونة لموقعك (Favicon)

وقت القراءة: 3 د

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

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

الخطوات

تحتاج إلى الوصول إلى ملفات موقعك أو إعداداته: لوحة الاستضافة، أو خانة «favicon» في منصة بناء المواقع، أو المجلد الرئيسي لمشروعك.

  1. 1

    اختر الفكرة

    الأيقونة صغيرة جدًا فاجعلها بسيطة: حرف أو حرفان، أو رمز بسيط، أو أبرز شكل في شعارك. فالتفاصيل الدقيقة تختفي عند 16 بكسل.

  2. 2

    افتح صانع الفافيكون

    اذهب إلى صانع الفافيكون. اختر «نص» للحروف (والحرف العربي يعمل جيدًا)، أو «صورة» لشعار أو صورة، أو «إيموجي» لعنصر مؤقت سريع.

  3. 3

    اضبط الشكل والألوان

    اختر مربعًا أو مستدير الزوايا أو دائرة، ولون الخلفية، وللنص لونه وخطه. وزد الهامش الداخلي إن لامس الرسم الحواف.

  4. 4

    راجع المعاينات

    انظر إلى تبويب المتصفح الفاتح والداكن والشاشة الرئيسية للجوال والأحجام الفعلية 16 و32 و48 بكسل. وإن صعب التعرف عليها عند 16 بكسل فبسّطها.

  5. 5

    نزّل الملف المضغوط

    اضغط تنزيل. تحتوي الحزمة على favicon.ico وfavicon-32.png وapple-touch-icon.png وicon-192.png وicon-512.png وicon-maskable-512.png وsite.webmanifest، إضافة إلى favicon.svg حين يكون المصدر نصًّا أو صورة SVG.

  6. 6

    ارفع الملفات وأضف الكود

    ضع كل الملفات في المجلد الرئيسي لموقعك بحيث يفتح /favicon.ico في المتصفح. والصق الكود الظاهر تحت المعاينة في ترويسة كل صفحة أو في القالب.

ما وظيفة كل ملف؟

يحتوي favicon.ico على نسخ بحجم 16 و32 و48 بكسل وهو الصيغة الكلاسيكية التي تفهمها كل المتصفحات. أما favicon.svg فنسخة متجهة تبقى حادة بأي حجم، فتستخدمها المتصفحات الحديثة إن وُجدت. وfavicon-32.png بديل PNG عادي.

وapple-touch-icon.png بحجم 180 × 180 بكسل وبخلفية صلبة، لأن الآيفون لا يتعامل مع الشفافية هناك ويقوّس الزوايا بنفسه. وicon-192.png وicon-512.png يستخدمهما أندرويد وتطبيقات الويب القابلة للتثبيت، وicon-maskable-512.png فيه هامش إضافي ليقصّه النظام دائرةً أو شكلًا مستدير الزوايا دون قطع الرسم. وsite.webmanifest يسرد هذه الأيقونات واسم موقعك.

نصائح تصميم تفرق عند 16 بكسل

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

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

مشاكل شائعة وحلولها

  • ما زالت الأيقونة القديمة تظهر بعد تغييرها

    تخزّن المتصفحات الأيقونات بقوة. أعد التحميل بالقوة، أو افتح الموقع في نافذة خاصة، أو افتح /favicon.ico مباشرة وأعد تحميله. وقد يستغرق التغيير وقتًا أطول في المفضلة ونتائج البحث.

  • الأيقونة تبدو ضبابية

    استخدم مصدرًا أكبر أو متجهًا وتصميمًا أبسط. فالتفاصيل الكثيرة والخطوط الرفيعة تضيع عند 16 بكسل.

  • الأيقونة غير مرئية في سمة المتصفح الداكنة

    الرمز الداكن على خلفية شفافة يختفي في شريط تبويبات داكن. امنح الأيقونة خلفيتها الخاصة، أو اختر ألوانًا ذات تباين قوي في السمتين.

  • نتائج البحث ما زالت تعرض أيقونة افتراضية

    تحدّث محركات البحث الأيقونات ببطء، وغالبًا خلال أيام أو أسابيع. تأكد أن ملفات الأيقونة متاحة وغير محجوبة في robots.txt ثم انتظر.

قص الصور

الأسئلة الشائعة

ما مقاس الفافيكون المناسب؟

وفّر نسخ 16 و32 و48 بكسل داخل favicon.ico، إضافة إلى 180 بكسل للآيفون و192 و512 بكسل لأندرويد. ويولّدها الصانع كلها من مصدر واحد.

هل ما زلت أحتاج favicon.ico؟

ما زال يستحق الإدراج: فكل المتصفحات وأدوات كثيرة تفهمه، بينما أيقونات SVG وPNG إضافات تفضلها المتصفحات الحديثة.

أين أضع ملفات الفافيكون؟

في المجلد الرئيسي لموقعك بحيث يعمل /favicon.ico. ثم أضف وسوم link من الكود إلى ترويسة صفحاتك.

شروحات ذات صلة