مولد Favicon للمواقع
أنشئ أيقونة احترافية لموقعك بسهولة من صورتك أو شعارك، وحمّلها بالمقاسات المناسبة للاستخدام على الويب.
اختر الأيقونة
ابحث في مكتبة أدواتي بلس المحلية واختر الرمز المناسب لموقعك.
أنشئ Favicon واضحًا بدل ترك المتصفح يختار أيقونة عشوائية لموقعك
الأيقونة المفضلة أو Favicon هي تلك العلامة الصغيرة التي تظهر بجانب اسم الصفحة في تبويب المتصفح، وقد تظهر أيضًا في الإشارات المرجعية، اختصارات الهاتف وبعض واجهات النظام. حجمها صغير، لكن وجودها يجعل الموقع أسهل في التمييز عندما يفتح المستخدم عدة صفحات في الوقت نفسه.
مولد Favicon يساعدك على تجهيز الأيقونة من مصدر تملكه بالفعل: شعار، صورة، ملف SVG، حرف أو كلمة قصيرة، وحتى رمز تعبيري. بدل إنشاء كل مقاس يدويًا، تبدأ من تصميم واحد ثم تجهز الملفات التي تحتاجها للموقع والمتصفح والأجهزة المختلفة.
الهدف ليس إنتاج أكبر عدد ممكن من الملفات، بل الحصول على حزمة مرتبة وواضحة تستطيع تثبيتها وفحصها بسهولة. لذلك ستجد في هذا الدليل شرحًا لاختيار المصدر، المقاسات الشائعة، ملفات الحزمة، أكواد HTML، وطريقة مراجعة الأيقونة بعد إضافتها إلى الموقع.
ما هي الأيقونة المفضلة، ولماذا تستحق الاهتمام؟
Favicon ليست شعارًا مصغرًا فحسب. هي نسخة مبسطة من الهوية يجب أن تبقى مفهومة حتى عندما تصبح صغيرة جدًا، ولهذا قد ينجح رمز بسيط في مساحة 32×32 بينما يفقد شعار طويل تفاصيله بالكامل.
تمييز تبويب الموقع
عندما تكون عدة تبويبات مفتوحة، تساعد الأيقونة المستخدم على التعرف على موقعك بسرعة دون قراءة اسم كل صفحة.
هوية أكثر اتساقًا
استخدام رمز واضح ومطابق لهوية المشروع يجعل حضور العلامة متناسقًا بين الموقع والمتصفح واختصارات الأجهزة.
مظهر أفضل في الاختصارات
عند إضافة الموقع إلى الشاشة الرئيسية أو حفظه كاختصار، تساعد الملفات المخصصة للأجهزة على عرض الرمز بصورة أنسب.
تفاصيل أقل، وضوح أكبر
مساحة Favicon محدودة جدًا، لذلك تحتاج عادة إلى نسخة مبسطة من الشعار بدل محاولة ضغط كل عناصر الهوية في مربع صغير.
ملفات مناسبة لكل سياق
المتصفحات والأجهزة قد تستخدم مقاسات أو أنواع ملفات مختلفة، ولهذا تكون الحزمة المتعددة أكثر عملية من الاعتماد على ملف واحد فقط.
سهولة المراجعة لاحقًا
عندما تكون أسماء الملفات وروابط HTML واضحة، يصبح تحديث الأيقونة أو استبدالها في المستقبل أقل عرضة للأخطاء.
ثلاث طرق سريعة لإنشاء Favicon من الصفر أو من هوية جاهزة
المصدر الأفضل يختلف من مشروع إلى آخر. موقع لديه شعار جاهز يحتاج مسارًا مختلفًا عن مشروع جديد لا يملك سوى اسم أو حرف أول.
تحويل صورة أو شعار
ارفع صورة واضحة ويفضل أن تكون مربعة أو قابلة للقص إلى مربع. هذا المسار مناسب عندما تملك رمزًا بصريًا جاهزًا وتريد تحويله إلى مقاسات Favicon متعددة.
إنشاء Favicon من النص
استخدم حرفًا أو حرفين من اسم المشروع، ثم اختر لون الخلفية والنص والخط المناسب. هذا الخيار عملي للعلامات التي لا تملك رمزًا مستقلاً بعد.
إنشاء Favicon من إيموجي
اختر رمزًا بسيطًا ومقروءًا إذا كان يناسب طبيعة المشروع. الإيموجي حل سريع للمواقع الشخصية أو المشاريع التجريبية التي لا تحتاج إلى شعار مصمم خصيصًا.
ماذا تتضمن حزمة Favicon المتكاملة؟
الحزمة الجيدة تجمع الملفات الشائعة تحت أسماء واضحة، حتى لا تضطر إلى العودة إلى التصميم الأصلي في كل مرة تحتاج فيها إلى مقاس جديد. وقد تختلف الملفات الفعلية بحسب إعدادات الأداة ومتطلبات مشروعك.
| الملف | المقاس الشائع | الاستخدام | ملاحظة |
|---|---|---|---|
| favicon.ico | قد يحتوي أكثر من مقاس | توافق عام واحتياطي للمتصفحات | يمكن أن يضم ملف ICO عدة أحجام بدل صورة واحدة فقط. |
| favicon-16x16.png | 16×16 | واجهات صغيرة وتبويبات | اختبر الرمز بصريًا بهذا الحجم لأنه يكشف التفاصيل الزائدة بسرعة. |
| favicon-32x32.png | 32×32 | متصفحات وشاشات أعلى كثافة | مقاس شائع لعرض أوضح من 16×16. |
| apple-touch-icon.png | 180×180 | اختصارات أجهزة Apple | يفضل أن تكون الهوية واضحة وتعمل جيدًا داخل مربع. |
| android-chrome-192x192.png | 192×192 | أجهزة Android وبعض تجارب الويب | يستخدم ضمن حزم المواقع الحديثة بحسب الإعداد. |
| android-chrome-512x512.png | 512×512 | نسخة كبيرة للأجهزة والتطبيقات المثبتة | يمنح النظام ملفًا عالي الدقة عند الحاجة. |
| site.webmanifest | ملف بيانات | تعريف أيقونات وبيانات تجربة الويب المثبتة | استخدمه عندما يحتاج مشروعك إلى Manifest وإعدادات مرتبطة به. |
أي مصدر تستخدم لإنشاء الأيقونة؟
لا يوجد مصدر واحد مناسب للجميع. اختر الملف أو الفكرة التي تعطي أفضل وضوح عند تصغيرها، وليس بالضرورة النسخة الأكثر تفصيلًا من شعارك.
PNG بخلفية شفافة
خيار عملي عندما تملك رمزًا جاهزًا وتريد الحفاظ على الشفافية حوله.
JPG أو صورة عادية
مناسب إذا كان المصدر يحتوي على خلفية ثابتة، مع ضرورة التأكد من أن القص داخل المربع لا يقطع أجزاء مهمة.
SVG
مناسب للشعارات المتجهية لأنه يوفر مصدرًا نظيفًا يمكن تصديره إلى عدة مقاسات بدقة جيدة.
حرف أو حرفان
حل بسيط وفعال عندما يكون اسم المشروع معروفًا أو عندما لا يوجد رمز بصري مستقل حتى الآن.
إيموجي
خيار سريع للمشاريع الخفيفة والتجريبية، بشرط أن يبقى الرمز واضحًا ويعبر عن طبيعة الموقع.
Favicon من موقع قائم
إذا كنت تراجع موقعًا موجودًا، ابدأ بفحص الملفات الحالية قبل استبدالها حتى تعرف ما الذي يعمل وما الذي ينقص الحزمة.
طريقة إنشاء Favicon خطوة بخطوة
لا تحتاج العملية إلى تعقيد. المهم أن تبدأ بمصدر جيد، تراجع النسخة الصغيرة، ثم تحمل الحزمة وتثبتها بصورة صحيحة.
اختر المصدر
ارفع صورة أو SVG، أو ابدأ بحرف أو إيموجي إذا لم تكن لديك أيقونة جاهزة.
اضبط الشكل والألوان
راجع القص والخلفية والتباين، وتأكد من أن الرمز لا يلامس الحواف بشكل مزعج.
افحص المقاسات الصغيرة
انظر إلى 16×16 و32×32 تحديدًا؛ إذا اختفت التفاصيل هنا، بسّط التصميم قبل التصدير.
حمّل الحزمة وثبّتها
ارفع الملفات إلى الموقع، أضف روابط HTML أو إعدادات المنصة اللازمة، ثم اختبر النتيجة في المتصفح والجوال.
كيف تجعل Favicon واضحًا في المقاسات الصغيرة؟
الأيقونة التي تبدو ممتازة على لوحة تصميم كبيرة قد تصبح غير مقروءة في تبويب المتصفح. راجع النسخة المصغرة كما ستظهر فعليًا للمستخدم.
استخدم عنصرًا بصريًا واحدًا أو تكوينًا بسيطًا. كل خط صغير أو تفصيلة دقيقة تقل فرص بقائها واضحة عند التصغير.
حافظ على تباين واضح بين الرمز والخلفية، واختبر الأيقونة على خلفية فاتحة وداكنة إذا كان موقعك قد يظهر في أوضاع مختلفة.
اترك مساحة آمنة حول العنصر الأساسي بدل تمديده حتى حواف المربع، خصوصًا في الأيقونات التي قد تعرضها الأنظمة داخل أقنعة أو زوايا مستديرة.
أين تضع ملفات Favicon وكيف تربطها بالصفحة؟
تستطيع المنصات الحديثة إدارة أيقونة الموقع من إعداداتها، لكن فهم روابط HTML يظل مفيدًا عندما تعمل على موقع مخصص أو تريد مراجعة ما تولده المنصة خلف الكواليس.
بعد رفع الملفات إلى مسارات ثابتة، يمكن تعريف بعض الملفات داخل عنصر <head>. المثال التالي يوضح البنية العامة، وقد تحتاج إلى تعديل المسارات أو الملفات بحسب الحزمة التي أنشأتها.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
| الخطوة | ما الذي تراجعه؟ |
|---|---|
| رفع الملفات | تأكد من أن الروابط تفتح الملفات مباشرة ولا تعيد 404. |
| إضافة الوسوم | طابق أسماء الملفات في HTML مع الأسماء الفعلية التي رفعتها. |
| الـManifest | أضفه فقط إذا كانت الحزمة والمشروع يستخدمانه وتأكد من صحة مسارات الأيقونات داخله. |
| الاختبار | افتح الموقع في أكثر من متصفح وراجع التبويب والاختصار على الهاتف عند الحاجة. |
افحص الأيقونات الحالية قبل أن تستبدلها
أحيانًا تكون المشكلة ليست في غياب Favicon، بل في أن بعض الملفات موجود وبعضها مفقود، أو أن HTML يشير إلى مسار قديم، أو أن Manifest يحتوي على أسماء لم تعد مستخدمة.
فاحص Favicon
أدخل رابط الموقع لمراجعة الأيقونات التي يمكن الوصول إليها ومعرفة ما إذا كانت الملفات الأساسية موجودة.
فحص وسوم HTML
راجع عناصر link داخل head وتأكد من أن كل مسار يشير إلى ملف موجود بالفعل.
فحص Manifest
إذا كان الموقع يستخدم site.webmanifest، راجع مسارات الأيقونات والأسماء والبيانات المرتبطة بالتجربة المثبتة.
اختبار التخزين المؤقت
المتصفح قد يحتفظ بالأيقونة القديمة فترة من الوقت، لذلك قد تحتاج إلى تحديث قوي أو اختبار نافذة خاصة بعد تغيير الملفات.
مراجعة المقاس الصغير
وجود الملف لا يعني أن تصميمه مناسب. افتح 16×16 و32×32 وتأكد من أن الرمز ما زال واضحًا.
تحويل SVG عند الحاجة
إذا كان لديك رمز SVG جيد لكنه لا يملك ملفات مساندة، استخدمه كمصدر لإنتاج PNG وICO بالمقاسات التي تحتاجها.
تركيب Favicon في WordPress وShopify وSquarespace
في الأنظمة الجاهزة، غالبًا لا تحتاج إلى تعديل HTML يدويًا. ابحث عن إعدادات هوية الموقع أو أيقونة المتصفح داخل إعدادات القالب أو الموقع، وارفع الملف المناسب من هناك.
WordPress
استخدم إعداد أيقونة الموقع المتاح في إعدادات القالب أو هوية الموقع، ثم راجع النتيجة على الواجهة بعد الحفظ.
Shopify
ابحث عن إعداد Favicon ضمن تخصيص القالب أو إعداداته، وارفع نسخة مربعة واضحة تتوافق مع الحقل المتاح.
Squarespace
استخدم إعداد Browser Icon أو إعداد الهوية المقابل في موقعك، ثم اختبر الأيقونة بعد تحديث الصفحة.
لماذا لا تظهر الأيقونة أحيانًا رغم أنك رفعت الملفات؟
معظم المشكلات تكون بسيطة: مسار غير صحيح، ملف قديم مخزن في المتصفح، أو حزمة لا تحتوي المقاسات التي تتوقعها المنصة.
اسم الملف في HTML لا يطابق اسم الملف الموجود على الخادم، أو الرابط يعيد خطأ 404.
الأيقونة الجديدة رُفعت بنجاح لكن المتصفح ما زال يعرض نسخة قديمة من التخزين المؤقت.
التصميم يحتوي على نصوص أو تفاصيل كثيرة تبدو جيدة في الملف الكبير لكنها تختفي عند 16×16.
ملف Manifest يشير إلى مسارات قديمة أو ملفات لم تعد موجودة بعد تغيير أسماء الحزمة.