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

ارفع صورة — أو اكتب من حرف إلى ثلاثة أحرف أو إيموجي — واحصل على كل الأحجام القياسية، من ICO بدقة 16×16 إلى أيقونة App Store بدقة 1024×1024، إضافةً إلى favicon.svg قابل للتوسيع. يشمل Apple Touch وAndroid Chrome وMS Tile وعلامة تبويب Safari المثبتة. حمّل الأحجام فرديًا أو كملف ZIP واحد.

ابدأ من شعارك الخاص أو أنشئ أيقونة سريعة من بضعة أحرف أو إيموجي بألوانك وخطك. يُنتج المولّد 17 ملف PNG مستقلًا يغطي مقاسات favicon القديمة (16، 32، 48، 64، 96، 128، 256)، وأيقونات Apple Touch (152، 167، 180)، وأيقونة App Store بدقة 1024، وAndroid Chrome (192، 384)، وMS Tile (144، 150، 310)، وأيقونة PWA 512. يمكنك تصفية الشبكة حسب المنصة، واختيار شكل الإخراج مربعًا أو بزوايا دائرية أو دائريًا، وفحص الفافيكون على علامات تبويب فاتحة وداكنة قبل التنزيل. يتضمن كل ZIP أيضًا ملف favicon.ico متعدد الدقة، وملف favicon.svg قابلًا للتوسيع، ومقتطف HTML جاهزًا للصق، وملف manifest.json مفعّلًا فيه maskable purpose لمقاسات Android؛ أضف اسم تطبيق واسمًا مختصرًا ليصبح قابلاً للتثبيت كتطبيق PWA.

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

1. ارفع صورة مربعة عالية الدقة (بدقة 512×512 بكسل على الأقل) كمصدر — أو انتقل إلى وضع النص واكتب من حرف إلى ثلاثة أحرف أو إيموجي لإنشاء واحدة فورًا.
2. راجع جميع الأحجام المُولّدة في الشبكة. فعّل أو عطّل الأحجام حسب المنصات التي تحتاجها.
3. يمكنك تنزيل مقاس مفرد، أو تنزيل favicon.ico متعدد الدقة منفصلًا، أو الضغط على «تنزيل الكل» للحصول على ZIP يحتوي كل المقاسات المختارة وحزمة ICO ومقتطف HTML وملف manifest.

متى تستخدم

• إطلاق موقع جديد وتحتاج تغطية فافيكون عبر كل المتصفحات وأنظمة التشغيل.
• تغيير الهوية البصرية: إعادة توليد كل أيقونات PWA والشاشة الرئيسية من الشعار الجديد.
• إضافة دعم الإضافة إلى الشاشة الرئيسية ليرسم أندرويد أيقونة maskable بشكل صحيح.

النتيجة

ترفع وكالة ويب الشعار الجديد لعميلها ضمن تجديد الهوية البصرية. تحصل على 12 حجمًا لسطح المكتب وiOS Safari وAndroid Chrome وبلاطات Windows وأيقونات مانيفست PWA، جاهزة للاستخدام.

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

ما الحجم المطلوب للصورة الأصلية؟

على الأقل 512×512 بكسل، مربعة، مع الشعار في المنتصف وبعض الهامش حوله. أصغر من ذلك ستظهر مشوشة بعد تكبيرها إلى أيقونة PWA 512. مصدر متجهي (SVG محوّل إلى PNG بحجم 1024) أفضل.

لماذا يوجد فافيكون PNG وفافيكون ICO معًا؟

تستخدم المتصفحات الحديثة صور PNG بمقاسات متعددة عبر link rel='icon'، وتميل أكثر فأكثر إلى فافيكون SVG واحد قابل للتوسيع. أما ملف .ico فلا يزال مطلوبًا في متصفحات ويندوز القديمة وبعض منصات الاستضافة ومسارات تثبيت المواقع. يخرج هذا المولّد الثلاثة معًا: ملفات PNG لكل المقاسات الحديثة، وملف favicon.svg قابل للتوسيع، وملف favicon.ico يجمع مقاسات 16 و32 و48 بكسل.

ما هي أيقونة maskable ولماذا يحتاجها أندرويد؟

أندرويد يقصّ أيقونات الشاشة الرئيسية على شكل دائرة أو squircle أو مربع مدوّر بحسب المُشغّل. أيقونة maskable فيها منطقة آمنة وسط (~80% من المساحة) فلا تُقصّ الأجزاء المهمة من الشعار. أضف نحو 10% هامش حول المصدر.

أين أضع الملفات الناتجة؟

ضع كل ملف PNG في جذر public أو /static، والصق مقطع HTML في رأس الصفحة، واربط manifest.json. روابط Apple Touch والفافيكون توضع في رأس HTML، أما أيقونات PWA فيشير إليها الملف manifest.

لماذا توجد خيارات الخلفية والهامش؟

الشعارات الشفافة تبدو جيدة على ألسنة المتصفح لكنها قد تبدو غريبة حين يضع أندرويد أو iOS مستطيلًا مدوّرًا خلفها. إضافة خلفية صلبة و8-12% هامش هنا يعطي ترميزًا متوقعًا للبلاطة عبر المشغّلات.

أدوات ذات صلة