أيقونات التطبيقات مقابل الأيقونات المفضلة: ICO مقابل PNG وما تتوقعه كل منصة
دليل واضح لاختيار صيغة الأيقونة المناسبة لكل منصة
أنشئ ICO متعدد الأحجامالأيقونات موجودة في كل مكان في البرمجيات الحديثة، من الصورة الصغيرة في تبويب المتصفح إلى المربع الكبير على شاشة الهاتف الرئيسية. على الرغم من تشابهها ظاهريًا، تخدم هذه الأيقونات أغراضًا مختلفة وتتبع قواعد صيغ مختلفة وتُعرض في سياقات مختلفة جدًا.
الفئتان الأكثر شيوعًا هما الأيقونات المفضلة وأيقونات التطبيقات. الأيقونة المفضلة (اختصار لـ "favorite icon") هي الصورة الصغيرة التي تظهر في تبويبات المتصفح وقوائم الإشارات المرجعية وسجل المتصفح. أيقونة التطبيق هي الصورة التي تمثل تطبيقًا أصليًا على سطح مكتب أو نظام تشغيل محمول.
تشرح هذه المقالة ما هو كل نوع من الأيقونات، ومتى يجب استخدام صيغة ICO مقابل PNG، وما تتوقعه المنصات الرئيسية فعلاً.
ما هي الأيقونة المفضلة؟
الأيقونة المفضلة هي الأيقونة التي يعرضها متصفح الويب بجانب موقعك. تراها في تبويب المتصفح بجانب عنوان الصفحة، في قائمة إشاراتك المرجعية، في سجل المتصفح، وفي بعض الحالات في شريط العناوين.
تاريخيًا، كان يجب أن تكون الأيقونات المفضلة بصيغة ICO. طلبها Internet Explorer ولم يكن هناك بديل. قدرة صيغة ICO على تضمين أحجام متعددة في ملف واحد جعلتها خيارًا عمليًا. المتصفحات الحديثة (Chrome وFirefox وSafari وEdge) تقبل الآن أيضًا أيقونات PNG مفضلة عبر وسم <link> في HTML، لكنها لا تزال تعود إلى /favicon.ico إذا لم يكن هناك وسم link صريح.
للتوافق الأقصى عبر جميع المتصفحات، يبقى توفير ملف favicon.ico في جذر موقعك النهج الأكثر أمانًا.
ما هي أيقونة التطبيق؟
أيقونة التطبيق تمثل تطبيقًا أصليًا داخل واجهة نظام التشغيل.
Windows يستخدم صيغة ICO لأيقونات التطبيقات. يجب أن يحتوي ICO على طبقات بأحجام 16 و32 و48 و64 و128 و256 بكسل.
macOS يستخدم صيغة ICNS وهي حاوية أيقونات خاصة بـ Apple.
iOS يتطلب صور PNG بأحجام محددة.
Android يستخدم أيضًا PNG، عادةً كطبقات أيقونات تكيفية.
تطبيقات الويب (PWA) تستخدم أيقونات PNG مشار إليها في ملف manifest.json. الأحجام الشائعة هي 192×192 و512×512.
ICO مقابل PNG: متى تستخدم أي صيغة
إليك جدول قرار يغطي السيناريوهات الأكثر شيوعًا.
| حالة الاستخدام | الصيغة الموصى بها | لماذا |
|---|---|---|
| أيقونة مفضلة لموقع ويب (ملف جذر) | ICO | بديل شامل للمتصفح؛ أحجام متعددة في ملف واحد |
| أيقونة مفضلة لموقع ويب (وسم link) | PNG (مع بديل ICO) | المتصفحات الحديثة تفضل PNG؛ ICO يغطي المتصفحات القديمة |
| أيقونة تطبيق Windows | ICO | مطلوب بواسطة Windows للملفات التنفيذية والاختصارات |
| أيقونة تطبيق macOS | ICNS (من مصادر PNG) | مطلوب بواسطة macOS |
| أيقونة تطبيق iOS | PNG | مطلوب بواسطة Apple |
| أيقونة تطبيق Android | PNG | مطلوب بواسطة Android |
| أيقونة شاشة رئيسية PWA | PNG | مشار إليها في manifest.json |
| تطبيق Electron/سطح مكتب | ICO (Windows) + ICNS (macOS) + PNG (Linux) | كل نظام يتطلب صيغته الخاصة |
عمليًا، تحتاج معظم المشاريع كلاً من ملف ICO (للأيقونة المفضلة وأي أهداف Windows) ومجموعة ملفات PNG (للمنصات المحمولة وPWA ومصادر macOS). يمكنك إنشاء جزء ICO باستخدام Any2ICO من نفس مصدر PNG الذي تستخدمه للمنصات الأخرى.
نصائح عملية وأخطاء شائعة
الاعتماد على PNG واحد لكل شيء: ملف PNG واحد بحجم 512×512 سيعمل لبعض السياقات لكنه سيفشل في أخرى. أنشئ دائمًا ملف ICO مخصصًا لاستخدام الأيقونة المفضلة وWindows.
استخدام حجم واحد فقط في ملف ICO: ملف ICO بحجم 32×32 فقط يبدو جيدًا في تبويب متصفح لكنه يصبح لطخة ضبابية في عرض الأيقونات الكبيرة في مستكشف Windows.
نسيان شاشات العرض عالية الكثافة وRetina: ضمّن طبقة 32×32 (التي تستخدمها المتصفحات عند تحجيم 2x لفتحة تبويب 16 بكسل) وطبقة 48×48 لتحجيم 3x.
عدم الاختبار عبر المنصات: اختبر أيقونتك المفضلة في Chrome وFirefox وSafari وEdge على الأقل. إذا كنت تبني تطبيق سطح مكتب، اختبر ICO على Windows عند تحجيم DPI بنسبة 100% و150% و200%.
للنظر أعمق في صيغة ICO وبنيتها، أو للمساعدة في إنشاء أيقونات مفضلة تحديدًا، انظر دليل إنشاء الأيقونات المفضلة.