صيغ الملفات
ما هو ICO؟ شرح ملفات الأيقونات وأيقونات المواقع
ICO هي صيغة أيقونات Windows التي تجمع عدة أحجام في ملف واحد. نشرح بنيتها وتاريخ أيقونة الموقع (Favicon) والأحجام التي تحتاجها اليوم.
الكاتب: Hemen Dönüştür Editör Ekibiتاريخ النشر: 7 دقائق قراءة
ICO هي الصيغة التي يستخدمها Windows لأيقونات البرامج والمجلدات، ويستخدمها الويب للأيقونة الصغيرة التي تظهر في تبويب المتصفح (Favicon). وما يميّزها عن صيغ الصور الأخرى أن ملفًا واحدًا يمكن أن يحمل عدة أحجام من الأيقونة نفسها. يشرح هذا المقال البنية الداخلية لملف ICO، وكيف تطوّرت عبر إصدارات Windows، وتاريخ أيقونة الموقع، والأحجام التي تحتاجها اليوم، وكيف تُنتج ملفات ICO بالشكل الصحيح.
ما هو ICO؟
ICO (بالامتداد .ico) صيغة حاوية عرّفتها Microsoft لموارد الأيقونات. يبدأ ملف ICO بـ "دليل أيقونات" يسرد كل صورة في الملف (مثل 16x16 و32x32 و48x48 بكسل) كمدخل مستقل. ثم يختار Windows أو المتصفح الحجم الأنسب للمكان الذي تُعرض فيه الأيقونة.
نوع MIME الرسمي المسجّل لدى IANA هو image/vnd.microsoft.icon، لكن برامج Microsoft وكثيرًا من الخوادم لا تزال تستخدم image/x-icon. وصيغة CUR الخاصة بمؤشرات الفأرة شبه مطابقة لها؛ إذ تستخدم القيمة 2 بدلًا من 1 في حقل النوع داخل الدليل، وتخزّن نقطة النقر في المؤشر (hotspot).
التاريخ: من أيقونات Windows إلى أيقونة الموقع
- Windows 1.0: كانت الأيقونات أحادية اللون.
- Windows 3.0: وصلت البنية القائمة على الدليل والتي تحمل عدة صور، كما نعرفها اليوم.
- 1995: وثّق مقال "Icons" من Microsoft لكاتبه John Hornick بنية ICO بالتفصيل، ونصح المطوّرين بتضمين صور 16x16 (16 لونًا) و32x32 (16 لونًا) و48x48 (256 لونًا) على الأقل.
- مارس 1999: أصبح Internet Explorer 5 أول متصفح يدعم أيقونات المواقع. فكان ملف
favicon.icoالموجود في جذر الموقع يظهر في المفضّلة وشريط العنوان. - Windows XP: أُضيفت قناة ألفا بعمق 8 بت إلى الصور ذات 32 بت، ما أتاح حوافّ ناعمة وشبه شفافة.
- Windows Vista: أُضيفت صور 256x256 وضغط PNG داخل ICO.
- 2003: قدّم طرف ثالث نوع MIME
image/vnd.microsoft.iconإلى IANA.
بنية ملف ICO
دليل الأيقونات (ICONDIR)
يبدأ الملف بترويسة من 6 بايتات: حقل محجوز (0)، والنوع (1 للأيقونات و2 للمؤشرات)، وعدد الصور. ويلي ذلك مدخل دليل بحجم 16 بايت لكل صورة.
مدخل الدليل (ICONDIRENTRY)
| الحقل | المعنى |
|---|---|
| bWidth، bHeight | العرض والارتفاع (بايت واحد لكل منهما). القيمة 0 تعني 256 بكسل. |
| bColorCount | عدد ألوان اللوحة (0 لعمق 8 بت فما فوق) |
| wPlanes، wBitCount | مستويات الألوان وعدد البتات لكل بكسل |
| dwBytesInRes | حجم بيانات الصورة بالبايت |
| dwImageOffset | موضع بداية بيانات الصورة في الملف |
ولأن حقول الحجم بايت واحد فقط، فإن الصورة داخل ملف ICO لا يمكن أن تتجاوز 256x256 بكسل.
بيانات الصورة: BMP أو PNG
في ملف ICO التقليدي تكون كل صورة ملف BMP بلا ترويسة الملف (أي DIB). ووفقًا لمقال Hornick، تحتوي على صورة ملوّنة (قناع XOR) يليها قناع شفافية بعمق 1 بت (قناع AND)، ولهذا يكون الارتفاع المخزّن في الترويسة هو الارتفاع المشترك للقناعين، أي ضعف الارتفاع الحقيقي. ومنذ Windows XP تحمل الصور ذات 32 بت قناة ألفا مباشرة في بيانات البكسلات.
ومنذ Windows Vista يمكن أن يكون المدخل أيضًا ملف PNG كاملًا بدلًا من BMP. وتضمين PNG، خاصة لحجم 256x256، يجعل الملف أصغر بكثير. وتشير MDN إلى أن PNG داخل ICO لم يكن مدعومًا قبل Vista وقد يسبّب مشكلات في البرامج القديمة، لكن المتصفحات وإصدارات Windows الحالية تقرأ النوعين.
ما الأحجام التي تحتاجها؟
أيقونات تطبيقات Windows
تنصّ إرشادات Microsoft الحالية لأيقونات التطبيقات على أن تطبيق Win32 ينبغي أن يتضمّن على الأقل 16x16 و24x24 و32x32 و48x48 و256x256. وإن لم يجد Windows تطابقًا تامًا فإنه يصغّر الحجم الأكبر التالي؛ ومع وجود صورة بحجم 256 بكسل لا تُصغَّر الأيقونة إلا تصغيرًا ولا تُكبَّر أبدًا. فعند مقياس 100% مثلًا، يستخدم شريط العنوان وقوائم السياق 16 بكسل ويستخدم شريط المهام 24؛ وعند 200% يصبحان 32 و48.
أيقونات المواقع
يعمل الويب بطريقة مختلفة. فبموجب معيار HTML، إن لم تحتوِ الصفحة على رابط rel="icon"، يجوز للمتصفحات أن تطلب /favicon.ico من جذر الموقع. لذا يبقى وضع favicon.ico في الجذر ممارسة جيدة، لكنه لا يكفي وحده:
- يشترط بحث Google أيقونة مربّعة (1:1) لا تقل عن 8x8 بكسل، ويوصي بأن تكون أكبر من 48x48 لتظهر جيدًا على مختلف الواجهات.
- تستخدم الشاشات الرئيسية في iPhone وiPad أيقونة
apple-touch-iconبحجم 180x180. - يتوقّع Android وتطبيقات الويب التقدّمية (PWA) أيقونات بحجم 192 و512 بكسل في ملف بيان تطبيق الويب، إلى جانب نسخة "maskable" للأيقونات المتكيّفة.
- تدعم المتصفحات الحالية أيضًا أيقونات SVG؛ إذ يغطي ملف متّجه واحد كل الأحجام.
عمليًا، يغطي وضع أحجام 16 و32 و48 بكسل داخل favicon.ico متصفحات سطح المكتب والأنظمة الأقدم، بينما تُقدَّم الأحجام الأكبر كملفات PNG منفصلة.
الدعم في الأنظمة والمتصفحات والبرامج
يقرأ Windows صيغة ICO ويكتبها أصلًا؛ فمستكشف الملفات والاختصارات وسطح المكتب كلها تعمل بها. ووفقًا لـ MDN، تعرض Chrome وEdge وFirefox وOpera وSafari ملفات ICO. ويستخدم macOS صيغته الخاصة ICNS لأيقونات التطبيقات، لكن تطبيق Preview يفتح ICO. وتفتح برامج التحرير مثل GIMP ملف ICO كملف متعدد الطبقات، بطبقة لكل حجم. وتنصح MDN بعدم استخدام ICO في محتوى الويب العام، وتشير إلى أن أيقونات المواقع اتجهت نحو PNG مع عنصر <link>.
نقاط القوة والضعف
| نقاط القوة | نقاط الضعف |
|---|---|
| عدة أحجام وأعماق ألوان في ملف واحد | الحد الأقصى 256x256 بكسل |
| دعم شامل في Windows | لا استخدام لها على الويب سوى أيقونات المواقع |
| قناة ألفا وضغط PNG (منذ Vista) | المداخل القديمة القائمة على BMP كبيرة وثقيلة |
| تبحث المتصفحات تلقائيًا عن favicon.ico في الجذر | تحتاج إلى أداة مخصّصة؛ فليس كل برنامج قادرًا على كتابتها |
مشكلات شائعة وطرق حلّها
ألا يكفي تغيير امتداد ملف PNG إلى .ico؟
تتسامح بعض المتصفحات مع ذلك، لكنه ليس ملف ICO حقيقيًا: فلا يوجد دليل أيقونات ولن يقبله Windows أيقونةً. الطريقة الصحيحة هي تحويل الصورة إلى ملف ICO حقيقي. تكتب أداتا PNG إلى ICO وJPG إلى ICO لدينا دائمًا مربّعات بحجم 16 و32 و48 بكسل، وتضيفان 64 و128 و256 حين تكون صورتك كبيرة بما يكفي. ويُضمَّن كل حجم بصيغة PNG، فتُحفظ الشفافية.
أيقونة الموقع ضبابية أو غير مقروءة
تختفي الخطوط الرفيعة والنصوص الصغيرة في 16 بكسل. استخدم علامة بسيطة عريضة عالية التباين؛ وعند الحاجة خذ جزء الرمز فقط من شعارك. ومصدر مربّع لا يقل عن 256x256، والأفضل 512x512 بكسل، يعطي أفضل نتيجة.
صورة غير مربّعة تبدو مضغوطة أو ممطوطة
الأيقونات مربّعة. لا تمطّ أدواتنا الصورة أبدًا: بل تضعها في منتصف مربّع مع الحفاظ على نسبها وتترك الحواف شفافة. وللحصول على مربّع مثالي، اقتطع جزءًا مربّعًا أولًا باستخدام قصّ الصورة.
أيقونة الموقع الجديدة لا تظهر
تخزّن المتصفحات أيقونات المواقع مؤقتًا لفترة طويلة. وإعادة تسمية الملف أو إضافة معامل إصدار (/favicon.ico?v=2)، والتحقّق من أن الخادم يُرجع نوع MIME الصحيح، يحلّان المشكلة عادةً. أما الأيقونة في نتائج بحث Google فلا تتحدّث إلا بعد إعادة الزحف إلى الموقع.
Windows ما زال يعرض الأيقونة القديمة
يحتفظ Windows بالأيقونات في ذاكرة تخزين مؤقت منفصلة. وغالبًا ما يكفي إعادة بناء التطبيق وإعادة إنشاء الاختصار، أو تسجيل الخروج ثم الدخول مجددًا.
نصائح للتحويل
- ملف ICO واحد لا يكفي لموقع ويب: يُنتج مُنشئ أيقونات Favicon دفعة واحدة favicon.ico (16 و32 و48 بكسل) وfavicon-48x48.png وapple-touch-icon.png (180 بكسل) وicon-192.png وicon-512.png والأيقونة القابلة للإخفاء icon-512-maskable.png وsite.webmanifest، إضافة إلى icon.svg حين يكون المصدر بصيغة SVG. كما يعطيك المقتطف الذي تلصقه في
<head>صفحتك. - أيقونة Apple تحتاج إلى خلفية معتمة: يعرض iOS المساحات الشفافة باللون الأسود ويدوّر الزوايا بنفسه، لذا يملأ مُنشئ الأيقونات أيقونة apple-touch-icon بلون الخلفية الذي تختاره.
- إن كان شعارك بصيغة SVG: أنشئ ملف PNG كبيرًا عبر SVG إلى PNG ثم حوّله إلى ICO، أو أعطِ ملف SVG مباشرة لمُنشئ الأيقونات.
تعمل أدوات ICO وأيقونات المواقع لدينا في متصفحك؛ لا تُرفع صورتك ولا تغادر جهازك أبدًا.
الأسئلة الشائعة
ما الحجم الأقصى لصورة ICO؟
حقلا العرض والارتفاع في مدخل الدليل بايت واحد لكل منهما، والقيمة 0 تعني 256. لذا فإن الصورة الواحدة داخل ملف ICO لا تتجاوز 256x256 بكسل.
هل أستخدم ICO أم PNG لأيقونة موقعي؟
استخدم الاثنين. ملف favicon.ico في الجذر بأحجام 16 و32 و48 بكسل يخدم المتصفحات القديمة والطلبات التلقائية؛ وصرّح بأيقونات PNG (وSVG اختياريًا) عبر وسوم <link> للمتصفحات الحالية والأجهزة المحمولة.
هل تدعم ICO الشفافية؟
نعم. تستخدم ملفات ICO القديمة قناعًا بعمق 1 بت، وللصور ذات 32 بت قناة ألفا كاملة منذ Windows XP، ويحمل PNG المضمّن الشفافية منذ Vista.
كيف أحوّل ملف ICO إلى PNG؟
أضف ملف ICO إلى محوّل الصور واختر PNG صيغةً هدفًا. إن كان الملف يحتوي على عدة أحجام، يُستخدم أكبرها.
هل تُستخدم ملفات ICO على Mac؟
يستخدم macOS صيغة ICNS لأيقونات التطبيقات. أما للمواقع، فإن favicon.ico وأيقونات PNG تعمل في المتصفحات على كل أنظمة التشغيل.
