ورشة الأيقونات
شعار واحد يدخل، وطقم كامل يخرج: تبويبات المتصفح، شعار التنقل، شاشة iPhone الرئيسية، Android / PWA، إضافة Chrome، صور رمزية دائرية. كل مقاس يُرسم ويُسمّى وفق القواعد المنشورة للمنصة، ويُعاين داخل واجهة حقيقية بالحجم الذي سيظهر به فعلًا.
أفلِت صورة هنا، أو انقر للاختيار
JPG / PNG / WebP / AVIF / GIF (الإطار الأول فقط)؛ يُفضّل 2560px أو أكثر.
يُفضّل شعار مربع 1024×1024 كمصدر؛ وغير المربع يعمل أيضًا ويُضمَّن بنسبته مع هامش.
ما ستحصل عليه فعليًا
ثلاثة مطبات تستحق المعرفة
أيقونات iOS لا تحمل ألفا
تسليم PNG بألفا إلى apple-touch-icon.png يجعل النظام يملأ البكسلات الشفافة بالأسود — حلقة داكنة على هاتف داكن تبدو كأصل معطوب. لذلك تُجبر تلك المقاسات على العتامة هنا.
maskable يضمن الوسط 80% فقط
أيقونات Android التكيفية تُقنَّع بشكل المشغّل (دائرة، مربع مدوّر، قطرة) ولا يُضمن مرئيًا سوى الوسط 80%: دائرة الأمان عند 512 قطرها 410px فقط. ادفع نصًا أو شكلًا مهمًا إلى الحافة وسيُقطع على الشاشة الرئيسية.
عند 16px لا يبقى إلا ظل
أيقونة favicon في التبويب 16×16 — أي 20 بكسل إجمالًا. الخطوط الرفيعة والتدرجات والنصوص الصغيرة تختفي كلها ولا تبقى سوى كتل لونية. بعد التوليد كبّر المعاينة إلى 8× وانظر إلى الحدود؛ إن لم تكن مميزة فبسّط العلامة.
أسئلة شائعة
عندما تكون الملفات سليمة لكن الموقع الحقيقي يتجاهلهاهل تُرفع صورتي إلى أي مكان؟
لا. فك الترميز والتضمين والترميز كلها تعمل في canvas المتصفح، ولا يوجد في الصفحة أي نقطة ملفات — افتح لوحة الشبكة: عدا أصول الصفحة الثابتة، لا شيء يحمل صورتك.
هل يجب نشر كل الملفات الـ 20؟
لا. الحد الأدنى هو favicon.ico (العملاء القديمة لا تطلب غيره) زائد أيقونة PWA واحدة (192 أو 512، وهو ما تفحصه قابلية التثبيت). أضف ما يناسب منصاتك. مجموعة شاشة iOS الرئيسية فيها 4 مقاسًا (180 / 167 / 152 / 120)؛ ولـ iPhone فقط يكفي 180.
استبدلت الأيقونة لكن التبويب يعرض القديمة؟
أيقونات favicon من أعند ذاكرات التخزين في الويب، وكثيرًا ما تعيش أطول من HTML الذي يشير إليها. أعد التحميل بقوة محليًا (⌘/Ctrl + Shift + R)؛ وفي الإنتاج انتظر أيضًا انتهاء CDN وذاكرة المتصفح. للتحقق فورًا أضف ?v=2 إلى href — عنوان جديد يفرض إعادة الجلب. لا علاقة لأي من ذلك بالملفات التي ولّدتها.
هل أحتاج favicon.ico وملفات PNG معًا؟
نعم، ولست بحاجة إلى تقسيم أي شيء. favicon.ico يغطي العملاء القدماء الذين يطلبون /favicon.ico مباشرة، وهو يتضمن أصلًا 16 / 32 / 48 فيختار المتصفح حسب كثافة العرض؛ أما ملفات PNG فهي إعلانات صريحة للمتصفحات الحديثة وقارئات التغذية.
لماذا يبدو favicon.svg ضبابيًا عند التكبير؟
لأن هذين الملفين صورة نقطية مغلّفة بـ SVG وليسا متجهًا حقيقيًا. الصورة النقطية لا تُحوّل إلى متجه — رسم المسارات عند 16px لا ينتج سوى ضجيج، والتضمين الصادق أفضل. وجودهما ليتوافق اسم الملف والمرجع؛ وفي الإنتاج اطلب من المصمم تصدير SVG متجهي حقيقي بالاسم نفسه.
كم يجب أن يكون حجم المصدر؟ وهل يجوز ألا يكون مربعًا؟
شعار مربع بـ 1024 × 1024 يغطي أكبر ناتج بدقة. وغير المربع يعمل أيضًا: يُضمَّن بنسبته في وسط اللوحة مع هامش على الضلع القصير، ولا يُمدّ أبدًا، والهامش يتحكم به شريط الهامش.
ماذا يعني «المصدر صغير جدًا» على البطاقة؟
لوحة ذلك المقاس تتجاوز المساحة القابلة للاستخدام في مصدرك، فتلك البكسلات لا يمكن إلا استيفاؤها صعودًا وستبدو ناعمة — المشكلة في المدخل لا في التصدير. قدّم مصدرًا أكبر، أو شغّل «بلا تكبير» لتضمين البكسلات الأصلية ورؤية شبكة البكسل بدل الضباب.
اخترت المربع، فلماذا الأفاتار مربع؟
كان كذلك دائمًا. المقاس 512 يصدّر لوحة مربعة والمنصة تطبق الدائرة بعد الرفع. إن اخترت الشكل الدائري يصبح للـ PNG المصدَّر زوايا شفافة، وبعض خانات الأفاتار تملؤها بالأبيض أو الأسود — عند الشك أبقِه مربعًا.
هل يعيد الحساب باستمرار عند سحب شريط الهامش؟
يعيد الحساب لكن مجمّعًا: يرسم عندما تتوقف، وأي تغيير لاحق يلغي التشغيل السابق. تبقى النتائج القديمة على الشاشة أثناء إعادة الرسم وتُستبدل دفعة واحدة في النهاية، فلا ينهار السحب بالصفحة إلى هياكل عظمية.
ماذا يوجد أيضًا في الـ ZIP؟
ملف README.txt: اسم المصدر وأبعاده، ومنطقة القص إن وُجدت، ومعاملات رسم هذه الجولة (الشكل / الهامش / الخلفية / الشفافية)، وقائمة الملفات كاملة والمقتطفتين. يستطيع زميل أن يتسلم الحزمة دون سؤالك عن شيء. يُسمّى الأرشيف مثل icons-20261024-1208.zip مع طابع زمني محلي.
تحتاج مقاسات صور اجتماعية بدلًا من ذلك؟استخدم محوّل المقاساتاستخدم الضغط الجماعيالدليل