مولّد favicon
ارفع شعارك واحصل في ملف ZIP واحد على الأيقونات التي يحتاجها موقعك: favicon.ico بصور 16 و32 و48 بكسل، وPNG بحجم 48 بكسل لـ Google، وApple Touch Icon بخلفية معتمة لـ iPhone، وأيقونتي 192 و512 بكسل لـ Android، وأيقونة قابلة للقناع بمنطقة آمنة محسوبة، وملف site.webmanifest. وإذا رفعت SVG أُضيف icon.svg أيضًا. ترى معاينات التبويب ونتيجة Google والشاشة الرئيسية وتنسخ كود <head> الجاهز؛ ويجري كل شيء داخل متصفحك.
- مجاني وبلا تسجيل
- ملفك لا يغادر جهازك
- حتى 50 ميغابايت للملف
أضف صورة شعارك أو أيقونتك لتبدأ. تصلح صيغ PNG وSVG وJPG وWebP؛ وللحصول على أفضل نتيجة استخدم صورة مربعة لا تقل عن 512 × 512 بكسل.
ملفك لا يغادر جهازك أبدًا؛ تُعالَج الصور داخل متصفحك. ولا تُضاف بيانات EXIF أو الموقع إلى الناتج.
كيف تنشئ أيقونة favicon
أضف شعارك
ارفع شعارًا بصيغة PNG أو SVG أو JPG أو WebP. وللحصول على أفضل نتيجة استخدم صورة مربعة لا تقل عن 512 × 512 بكسل؛ وملف SVG مناسب أيضًا.
حدّد الاسم والألوان والهوامش
اكتب اسم الموقع والاسم المختصر، واختر لون السمة ولون الخلفية، وأضف هوامش إن احتجت. تُظهر المعاينات شكل الأيقونة في التبويب وفي Google وعلى الشاشة الرئيسية.
نزّل الحزمة وضعها في موقعك
نزّل ملف ZIP وارفع الملفات إلى المجلد الجذر لموقعك، وأضف مقطع <head> المعروض إلى صفحاتك.
ما الذي يبقى محفوظًا؟
يبقى كما هو
- نسب شعارك: تُوضع الصورة غير المربعة داخل مربع ولا تُمدَّد أبدًا
- الشفافية (في الأيقونات القياسية؛ وإذا اخترت لون خلفية فتُملأ به)
- إذا رفعت SVG فيُضاف icon.svg كما هو
يتغيّر
- تُعاد معالجة كل أيقونة إلى حجمها الخاص بجودة عالية
- تكون Apple Touch Icon والأيقونة القابلة للقناع معتمتين دائمًا: بلون الخلفية الذي تختاره أو بالأبيض عند اختيار «شفاف»
- في الأيقونة القابلة للقناع يقع المحتوى داخل المنطقة الآمنة 80%
لا ينتقل
- لا يُنشأ ملف متجه (SVG) من PNG أو JPG؛ ولا يوجد icon.svg إلا عند إدخال SVG
- لا تُضاف بيانات EXIF وغيرها من البيانات الوصفية إلى الأيقونات
متى تستخدمه؟
مجموعة أيقونات كاملة لموقع جديد
لم يعد ملف favicon.ico وحده كافيًا: فالشاشة الرئيسية في iPhone وAndroid ونتائج بحث Google تتوقع ملفات مختلفة. رفع واحد يعطيك كلها بالأسماء والأحجام الصحيحة.
ظهور أيقونتك في نتائج Google
يعرض Google أيقونة موقعك في نتائج البحث من ملف مربع يكون حجمه من مضاعفات 48 بكسل ويجب أن يكون قابلًا للزحف. تتضمن الحزمة هذا الملف ورابطه في <head>.
موقع يمكن إضافته كالتطبيق (PWA)
إن أردت أن يُضاف موقعك إلى الشاشة الرئيسية فأنت بحاجة إلى manifest وأيقونتي 192 و512 بكسل. وتمنع الأيقونة القابلة للقناع اقتطاع شعارك عندما يقصّ Android الأيقونة على شكل دائرة أو مربع بزوايا مستديرة.
قيود يجب معرفتها
- للحصول على أفضل نتيجة استخدم صورة مربعة لا تقل عن 512 × 512 بكسل؛ فالأيقونات الكبيرة المصنوعة من مصادر أصغر تبدو غير حادة.
- الخطوط الرفيعة والنصوص الصغيرة تصبح غير مقروءة في أيقونات 16 و32 بكسل؛ والشعارات الجريئة عالية التباين أنسب.
- لا يُطبَّق لون السمة إلا في شريط العنوان لمتصفحات الجوال، ويعتمد على إعدادات المتصفح.
- قد يستغرق Google أيامًا بل أسابيع لتحديث الأيقونة في نتائج البحث، كما تحتفظ المتصفحات بالأيقونات في ذاكرتها المؤقتة.
الأسئلة الشائعة
ما ملفات favicon التي يحتاجها الموقع؟
الأسلوب الحالي: favicon.ico في المجلد الجذر، وPNG بحجم 48 بكسل لـ Google، وicon.svg إن أمكن، وapple-touch-icon.png بحجم 180 بكسل لـ iPhone، وأيقونتا 192 و512 بكسل لـ Android، وملف site.webmanifest. ينتج المولّد كلها ويعطيك روابط <head>.
ما الأيقونة القابلة للقناع؟
الأيقونة القابلة للقناع تُبقي محتواها داخل منطقة آمنة وخلفيتها ممتلئة بالكامل، فيستطيع Android قصها على شكل دائرة أو مربع بزوايا مستديرة أو غيرهما بحسب الجهاز. هنا يوضع المحتوى في المنطقة المركزية 80% من صورة 512 بكسل.
لماذا تكون Apple Touch Icon معتمة بزوايا قائمة؟
يعرض iOS المناطق الشفافة سوداء ويدوّر الزوايا بنفسه. لذلك تُنتَج الأيقونة ممتلئة بالكامل وبلا زوايا مستديرة، بلون الخلفية الذي تختاره (الأبيض عند اختيار شفاف).
لماذا لا تظهر أيقونتي في نتائج Google؟
يجب ألا يمنع ملف robots.txt ملف الأيقونة، وأن يكون مرتبطًا من <head> الصفحة الرئيسية، وأن يكون مربعًا حجمه من مضاعفات 48 بكسل. وبعد الإصلاح يمكنك طلب إعادة فهرسة الصفحة الرئيسية في Search Console؛ وقد يستغرق التحديث أيامًا أو أسابيع.
ماذا يحدث إذا رفعت صورة غير مربعة؟
تُوضع الأيقونات داخل مربع دون تشويه فتبقى مساحة فارغة على الجانبين. وإن أردت أن يملأ الإطار المربع كله فاقصص الصورة إلى 1:1 بأداة القص أولًا.
هل ينشئ الموقع favicon بصيغة SVG من PNG؟
لا. التحويل التلقائي من بكسلات إلى صورة متجهة قد يغيّر مظهر الأيقونة دون أن تلاحظ، لذلك لا يُضاف icon.svg إلا عندما ترفع أنت ملف SVG.
هل هذه الأداة مجانية؟
نعم، مجانية تمامًا. لا حساب ولا اشتراك ولا علامة مائية.
هل تُرفع ملفاتي إلى مكان ما؟
لا. تُعالَج الصور داخل متصفحك ولا تغادر جهازك أبدًا. ولا تُضاف بيانات EXIF والموقع إلى الناتج.