مولّد أيقونة الموقع
ارفع صورة مرة واحدة، ونزّل كل حجم أيقونة تحتاجه: تبويبات المتصفح، والشاشة الرئيسية لـ iOS، وأيقونات Android/PWA، بالإضافة إلى كود HTML لاستخدامها.
انقر لاختيار صورة، أو اسحبها وأفلتها هنا
الصور المربعة تعطي أفضل نتيجة. تبقى على جهازك، لا شيء يُرفع.
ما الذي ستحصل عليه
ملف .zip يحتوي على صور PNG بأحجام 16×16 و32×32 و48×48 لتبويبات المتصفح، وأيقونة apple-touch-icon بحجم 180×180 للشاشة الرئيسية في iOS، وصور PNG بحجم 192×192 / 512×512 لملفات Android وPWA، بالإضافة إلى ملف نصي يحتوي وسوم <link> الدقيقة للصقها داخل <head> موقعك.
كيف تعمل
تُقصّ صورتك أولًا إلى أكبر مربع مُمركز يمكن أن يسعها، ثم يقوم استدعاء واحد لدالة drawImage() بقصّ ذلك المربع وتحجيمه إلى لوحة رسم بالحجم المطلوب في خطوة واحدة، لذا تخرج الصور غير المربعة مقصوصة بدلًا من أن تتمدد. يحدث هذا ست مرات، مرة لكل حجم: 16 و32 و48 و180 و192 و512 بكسل، وتُصدَّر كل لوحة كملف PNG. يُجمَّع أرشيف الـ zip بايتًا بايتًا في جافاسكريبت دون أي ضغط على خادم، ويتضمن ملف نص يحتوي على وسوم <link> الدقيقة لتلصقها في <head> موقعك.
ستلاحظ عدم وجود ملف .ico: كل المتصفحات الحديثة تقبل أيقونات PNG مباشرة. من بين الأحجام المُولَّدة، 32×32 تغطي علامات تبويب المتصفح على الشاشات الحديثة، و180×180 هو ما يستخدمه iOS لاختصارات الشاشة الرئيسية، و192×192 مع 512×512 هما الحجمان اللذان تتطلبهما مواصفة تطبيقات الويب التقدمية. أيقونة تبدو رائعة عند 512px غالبًا ما تتحول إلى تشويش عند 16px، لذا فضّل شكلًا جريئًا واضحًا وتباينًا عاليًا على التفاصيل الدقيقة.
تُفكَّك الصورة التي تُسقطها وتُقصّ وتُغيَّر أبعادها وتُضغَط بالكامل في ذاكرة متصفحك؛ لا توجد نقطة رفع في هذه الصفحة على الإطلاق. راقب تبويب الشبكة أثناء التوليد: النقل الوحيد هو ملف الـ zip الجاهز وهو ينتقل من الذاكرة إلى مجلد التنزيلات لديك.
أسئلة شائعة
لماذا ليس ملف .ico؟
تدعم المتصفحات الحديثة وiOS وAndroid جميعها أيقونات PNG مباشرة، وهذا ما عليه كل حجم في هذا التنزيل. تاريخيًا كان ملف .ico يجمع عدة أحجام في حاوية واحدة، لكنه لم يعد ضروريًا، ومقتطف HTML المرفق يوجّه المتصفحات إلى ملف PNG المناسب لكل سياق.
أي صورة يجب أن أرفع؟
الصورة المربعة تعطي أفضل نتيجة وتُقصّ بشكل نظيف. تُقصّ الصور غير المربعة تلقائيًا إلى مربع بمركز الصورة قبل تغيير الحجم، لذا يجب أن يكون الجزء المهم من شعارك قريبًا من المركز.
هل تُرفع صورتي إلى أي مكان؟
لا، يُنشأ كل حجم محليًا داخل متصفحك باستخدام واجهة canvas. لا شيء يُرسل إلى خادم.