مولد Favicon
حوّل صورتك إلى أيقونة موقع احترافية بكل الأحجام المطلوبة.
دليل إنشاء Favicon
كل ما تحتاجه لأيقونة موقع احترافيةالـ Favicon هو الأيقونة الصغيرة التي تمثل موقعك في كل مكان: تبويبات المتصفح، الإشارات المرجعية، الشاشة الرئيسية للهواتف، ونتائج البحث. قد تكون صغيرة بالبكسلات، لكنها كبيرة بالأثر — إنها أول انطباع بصري عن هويتك الرقمية. هذه الأداة تنشئ كل الأحجام التي تحتاجها بنقرة واحدة.
لماذا Favicon مهم؟
التعرف السريع
بين عشرات التبويبات المفتوحة، المستخدم يعتمد على الأيقونة للتعرف على موقعك فوراً.
الإشارات المرجعية
عند حفظ موقعك في المفضلة، الأيقونة تجعله مميزاً وسهل الوصول.
الشاشة الرئيسية
عند إضافة موقعك للشاشة الرئيسية، الأيقونة الكبيرة (180×180) ضرورية.
نتائج البحث
محركات البحث تعرض الأيقونة بجانب نتائجك، مما يزيد معدل النقر.
الأحجام المطلوبة ولماذا
الأحجام الأساسية لتبويبات المتصفح وشريط العناوين. ضرورية لكل موقع.
لأجهزة Apple (iPhone, iPad). تظهر عند إضافة الموقع للشاشة الرئيسية.
لتطبيقات الويب التقدمية (PWA) على Android. مطلوبة في manifest.json.
خطوات الاستخدام
الـ Favicon صغير جداً (16×16 بكسل = 256 بكسل فقط). تجنب التفاصيل الدقيقة والنصوص الصغيرة. استخدم شكلاً بسيطاً ومميزاً بألوان متباينة. شعار مبسط أو حرف واحد يعمل بشكل أفضل.
كل العمليات تتم في متصفحك. صورك لا تُرسل لأي خادم — آمنة وخاصة تماماً.
الأسئلة الشائعة
إجابات حول Faviconما الفرق بين ICO و PNG؟
ICO (favicon.ico):
- الصيغة التقليدية منذ عام 1999
- يمكنها احتواء أحجام متعددة في ملف واحد
- مطلوبة للمتصفحات القديمة (IE)
- توضع في جذر الموقع تلقائياً
PNG:
- أفضل جودة وشفافية
- مدعومة في كل المتصفحات الحديثة
- أخف حجماً للأحجام الكبيرة
- مطلوبة لـ Apple و Android
الأفضل: استخدم الاثنين معاً.
أين أضع ملفات Favicon؟
- favicon.ico: في جذر الموقع (yoursite.com/favicon.ico)
- ملفات PNG: يمكن وضعها في أي مجلد مع تحديد المسار في HTML
- apple-touch-icon.png: في جذر الموقع أو حدد المسار
المتصفحات تبحث تلقائياً عن favicon.ico في الجذر.
الأيقونة لا تظهر رغم رفعها — ما الحل؟
مشكلة شائعة! جرّب:
- امسح الكاش: Ctrl+Shift+R أو Ctrl+F5
- تحقق من المسار: افتح yoursite.com/favicon.ico مباشرة
- تحقق من كود HTML: تأكد من وجود وسوم link الصحيحة
- انتظر: بعض المتصفحات تحتفظ بالكاش لساعات
جرّب في نافذة تصفح خاص (Incognito).
هل أحتاج كل هذه الأحجام فعلاً؟
يعتمد على احتياجاتك:
- الحد الأدنى: favicon.ico (16+32) كافٍ للمواقع البسيطة
- الموصى به: أضف 180×180 لأجهزة Apple
- تطبيق PWA: تحتاج 192×192 و 512×512 حتماً
الأداة تنشئ كل الأحجام — استخدم ما تحتاجه.
لماذا صورتي تبدو سيئة في 16×16؟
16×16 صغير جداً (256 بكسل فقط!):
- التفاصيل الدقيقة تختفي أو تصبح ضبابية
- النصوص تصبح غير مقروءة
- التدرجات اللونية تبدو سيئة
الحل: استخدم شكلاً بسيطاً جداً بألوان صلبة ومتباينة.
ما هو manifest.json ولماذا أحتاجه؟
ملف manifest.json يحوّل موقعك إلى "تطبيق ويب" (PWA):
- يحدد اسم التطبيق والأيقونات
- يسمح بالتثبيت على الشاشة الرئيسية
- يحدد لون الثيم وشاشة البداية
إذا كان موقعك بسيطاً، لا تحتاجه. لتطبيقات الويب المتقدمة، ضروري.
هل يمكنني استخدام SVG كـ Favicon؟
نعم! SVG favicon مدعوم في المتصفحات الحديثة:
- مقاس واحد يعمل لكل الأحجام
- يدعم الوضع الداكن (media queries)
- حجم ملف صغير جداً
لكن لا يزال تحتاج ICO للمتصفحات القديمة و PNG لـ Apple.