🖼️صورة

مولد الأيقونات المفضلة (Favicon)

ارفع أي صورة واحصل فوراً على جميع أحجام أيقونة الموقع — لتبويبات المتصفح، وأيقونات Apple، وأندرويد/PWA — كملف ZIP جاهز للاستخدام.

📁

أفلت الصورة هنا أو اضغط للرفع

PNG أو JPG أو SVG أو WebP — الصور المربعة تعطي أفضل نتيجة

المُضمَّن في الملف المضغوط

16×16تبويب المتصفح (كلاسيكي)

32×32تبويب المتصفح (عالي الدقة)

48×48أيقونة موقع Windows

96×96Google TV / الاختصارات

180×180أيقونة Apple touch

192×192أيقونة أندرويد / PWA

512×512شاشة بدء PWA / المتجر

HTMLمقتطف <head>

JSONمقتطف أيقونات manifest

كيف تُنشئ أيقونة موقع مثالية (Favicon)

الأيقونة المفضلة (favicon) هي الرمز الصغير الذي يظهر في تبويب المتصفح، وشريط المفضلة، وشاشة الهاتف الرئيسية عند حفظ موقعك. رغم صغر حجمها، فهي من أكثر نقاط التواصل المرئي بروزاً لعلامتك التجارية — يراها الزوار باستمرار أثناء التصفح.

تتطلب المتصفحات والأجهزة الحديثة أحجاماً متعددة من الأيقونة. ملف ICO واحد بحجم 16×16 لم يعد كافياً — أجهزة Apple تحتاج أيقونات لمس بحجم 180×180، وتثبيتات أندرويد وPWA تحتاج ملفات PNG بحجم 192×192 و512×512، ونظام Windows يحتاج 48×48 للاختصارات.

دليل أحجام الأيقونة الكامل

استخدم هذه القائمة: 16×16 و32×32 لتبويبات المتصفح، و48×96 لاختصارات Google/Windows، و180×180 لأيقونات Apple touch (مطلوبة لشاشة iOS الرئيسية)، و192×192 لشاشة أندرويد الرئيسية وملف PWA، و512×512 لشاشات بدء PWA ومعاينات المتاجر.

نصائح تصميمية للأيقونة

عند حجم 16 بكسل، يختفي التعقيد. استخدم شعارك المختصر — وليس الاسم الكامل للعلامة — واختبره على السمتين الفاتحة والداكنة للمتصفح. الخلفية الشفافة تجعل الأيقونة تتكيف تلقائياً مع أي سمة متصفح؛ أما الخلفية البيضاء أو الصلبة فتمنحك تحكماً أكبر لكنها قد تبدو غير متناسقة في وضع المتصفح الداكن.

أيقونات PWA وملف Web App Manifest

إذا كان موقعك تطبيق ويب تقدمياً (PWA)، فيجب أن يشير ملف site.webmanifest إلى مسارات الأيقونات. يتضمن الملف المضغوط الناتج مقتطف manifest بالبنية الصحيحة. أضف أيقونة 192×192 مع purpose: "any maskable" لدعم الأيقونات التكيفية على أندرويد.

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

ما الصيغة المناسبة للأيقونة المفضلة؟

تدعم المتصفحات الحديثة أيقونات PNG مباشرة — لم تعد بحاجة لصيغة ICO. يُنصح باستخدام PNG في جميع الاستخدامات الحديثة. صيغة ICO مطلوبة فقط لدعم المتصفحات القديمة جداً (قبل 2015).

لماذا لا تتحدث الأيقونة بعد تغييرها؟

تخزّن المتصفحات الأيقونات مؤقتاً بشكل مكثف. أعد التحميل القسري (Ctrl+Shift+R أو Cmd+Shift+R) أو افتح نافذة تصفح خاصة لرؤية الأيقونة المحدّثة. في بيئة الإنتاج، تساعد إضافة معامل استعلام لكسر التخزين المؤقت مثل href="/favicon.png?v=2".

هل أحتاج أيقونة منفصلة للوضع الداكن؟

يمكنك استخدام خاصية prefers-color-scheme في أيقونات SVG للتبديل بين النسختين الفاتحة والداكنة. أيقونات PNG لا تدعم ذلك، لكن أيقونة بخلفية شفافة ولون متوسط عادة ما تعمل بشكل مقبول على كلا الوضعين.

ما الفرق بين الأيقونة المفضلة وأيقونة Apple touch؟

تظهر الأيقونة المفضلة (16–48 بكسل) في تبويبات المتصفح والمفضلة. أما أيقونة Apple touch (180×180) فتُستخدم عند حفظ المستخدم لموقعك على شاشة iOS الرئيسية — وتظهر كأيقونة تطبيق. كلتاهما ضروريتان لإعداد كامل.

هل يمكنني استخدام SVG كأيقونة مفضلة؟

نعم — تدعم إصدارات Chrome وFirefox وEdge الحديثة أيقونات SVG عبر <link rel="icon" type="image/svg+xml">. لكن Safari لا يدعم أيقونات SVG، لذا احرص دائماً على توفير بديل PNG.