ما هو مولّد أيقونات الموقع؟

مولّد الفافيكون هذا ينشئ جميع أحجام الفافيكون التي يحتاجها موقعك — من صورة مرفوعة أو أحرف أولى تكتبها أو رمز تعبيري. اختر مصدرًا واحصل على ملفات ICO بأحجام 16×16 و32×32 و48×48، وملف SVG قابل للتكبير دون فقدان جودة، إضافة إلى إصدارات PNG لأيقونات Apple Touch وشاشات أندرويد الرئيسية، جاهزة للإضافة لمشروعك.

ابدأ من صورة، أو اكتب حرفًا إلى ثلاثة أحرف مع اختيار الخط والشكل، أو اختر رمزًا تعبيريًا — ثم تُنشئ الأداة ست صور PNG (16 و32 و48 و180 و192 و512 بكسلاً)، وملف SVG حادًّا، وملف ICO متعدّد الدقّات يضمّ المقاسات الصغيرة الثلاثة التي ما زالت تبويبات Windows تطلبها. تُجمَع كلّها في ZIP مع ملف site.webmanifest ووسوم link الجاهزة للصق في رأس الصفحة. المصدر المربّع SVG أو PNG يعطي أنظف تكبير.

كيفية الاستخدام

1. اختر مصدرًا: ارفع صورة مربعة (PNG أو JPG أو SVG، ويُفضّل 512×512 أو أكبر)، أو اكتب أحرفًا أولى مع اختيار الخط والشكل، أو اختر رمزًا تعبيريًا.
2. عاين الفافيكونات المُولّدة بجميع الأحجام القياسية (16px، 32px، 48px، 180px، 192px، 512px).
3. حمّل حزمة الفافيكون الكاملة كملف ZIP، تتضمن ملف ICO وجميع أحجام PNG ووسوم HTML link للصقها في رأس الصفحة.

متى تستخدم

• إضافة أيقونات التبويب وشاشة البدء لموقع أو تطبيق ويب جديد.
• تحديث هوية العلامة عبر موقع قائم بعد إعادة تصميم الشعار.
• توليد أيقونات PWA تطابق مواصفات manifest لإضافة الموقع إلى الشاشة الرئيسية.

النتيجة

يرفع مطور شعار شركته الناشئة بدقة 1024×1024. تُولّد الأداة مجموعة كاملة تشمل favicon.ico (16/32/48) وapple-touch-icon.png (180×180) وأيقونات أندرويد (192/512)، بالإضافة إلى وسوم HTML الوصفية.

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

لماذا أحتاج كل هذه المقاسات المختلفة من favicon؟

كل منصة تطلب مقاساً محدّداً. تبويبات Chrome تستعمل 32 بكسلاً، الإشارات المرجعية 16، شاشات iOS الرئيسية 180، شاشات Android الرئيسية 192، وشاشات بدء PWA 512. تجهيز الجميع يبقي الأيقونة واضحة أينما ظهرت.

هل أرفع PNG أم SVG أم JPG؟

SVG هو الأفضل لأنه يتدرّج بدون فقد لأي مقاس. PNG بحجم 512×512 الخيار التالي. JPG يعمل لكن الضغط بفقد قد يترك هالات حول حواف الأيقونة، خاصةً في 16 و32 بكسلاً.

ماذا يحوي ملف ICO بالضبط؟

ICO صيغة حاوية. الذي تنشئه هذه الأداة يضمّ ثلاث طبقات بكسلية (16 و32 و48) فيختار Windows الطبقة المناسبة تلقائياً حسب مكان عرض الأيقونة: شريط المهام، قائمة الملفات، أو تبويب المتصفح.

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

فك ضغط الحزمة في جذر public لموقعك بجانب index.html. وسوم link المرفقة تستخدم مسارات جذرية (/favicon.ico و/apple-touch-icon.png) فلا تحتاج إعداداً إضافياً في HTML الصرف أو في أُطر مثل Next.js أو Astro أو Vite.

حدّثت الـ favicon لكن المتصفح لا يزال يعرض القديمة. لماذا؟

المتصفحات تخزّن favicon مؤقتاً بشدّة. اعمل إعادة تحميل قسرية (Ctrl+Shift+R على Windows وCmd+Shift+R على Mac)، أو أضف سلسلة استعلام إلى وسم link مثل /favicon.ico?v=2 لإجبار جلب نسخة جديدة. التخزين المؤقت يُمسح عادةً خلال يوم.

أدوات ذات صلة