Favicon (.ico) مقابل PNG

تم إنشاء تنسيق .ico خصيصًا لاستيعاب أحجام أيقونات متعددة في حاوية ثنائية واحدة. يحتوي favicon.ico المبني جيدًا على إطارات بأبعاد 16×16 و32×32 و48×48 و64×64 بكسل. عندما يحتاج المتصفح إلى أيقونة مفضلة لعلامة تبويب، فإنه يفتح ملف .ico، ويقرأ الدليل ICO، ويحدد الإطار الأكثر تطابقًا مع حجم العرض المطلوب. هذه الإمكانية متعددة الأحجام هي الميزة المميزة لـ .ico مقارنة بـ PNG.

PNG هو تنسيق صورة واحدة. يحتوي الملف PNG على صورة واحدة بدقة واحدة بالضبط. لتغطية أحجام متعددة باستخدام PNG وحده، تحتاج إلى ملفات متعددة وعلامات `<link>` متعددة ذات سمات `sizes=` صريحة. هذا أكثر تفصيلاً ولكنه يسمح بالتحكم الدقيق في الصورة التي يتم عرضها عند كل دقة. يدعم PNG أيضًا ضغطًا أفضل بدون فقد البيانات من إطارات ICO المشفرة بـ BMP بأي دقة معينة.

توافق المتصفح هو المكان الذي يفوز فيه .ico بشكل حاسم. يقوم كل متصفح - بما في ذلك IE القديم، والإصدارات Edge القديمة، والإصدارات القديمة Safari، والمتصفحات المتخصصة الغامضة - بجلب /favicon.ico من جذر النطاق دون الحاجة إلى أي علامة `<link>`. حتى إذا قمت بحذف علامة الارتباط بالكامل، فستحاول المتصفحات استخدام GET /favicon.ico كاتفاقية. يتطلب PNG علامات `<link rel='icon' type='image/png'>` صريحة تحتوي على أنواع MIME الصحيحة وإلا فسيتم تجاهله.

دعم الشفافية متساوي بين .ico و PNG. يدعم كلا التنسيقين قناة ألفا 8 بت (شفافية كاملة لكل بكسل). ومع ذلك، يحافظ .ico على الشفافية فقط عندما تستخدم إطاراته الداخلية ضغط PNG، وليس BMP. أحيانًا ما تكون أجهزة ترميز ICO القديمة هي BMP، والتي تتمتع بشفافية محدودة (1 بت). استخدم دائمًا مولدًا حديثًا ينتج إطارات .ico مضغوطة بـ PNG.

تعتمد مقارنة حجم الملف على السياق. يعد الملف الفردي مقاس 32 × 32 PNG أصغر من ملف .ico متعدد الأحجام الذي يجمع إطارات بحجم 16 و32 و48 و64 بكسل. ومع ذلك، يستبدل .ico أربعة ملفات PNG منفصلة بالإضافة إلى أربع علامات ارتباط. بالنسبة للحمولة الإجمالية، يكون ملف .ico متعدد الأحجام المضغوط جيدًا دائمًا تقريبًا أصغر من المجموعة المكافئة من PNGs الفردية مجتمعة.

يفوز PNG بكفاءة الضغط بأي حجم فردي. تعتبر خوارزمية الضغط PNG (DEFLATE/zlib) فعالة بشكل خاص للشعارات ذات الألوان المسطحة والأعمال الفنية ذات نمط الأيقونات ذات الحواف الحادة ولوحات الألوان المحدودة. يمكن أن يكون الشعار مقاس 32×32 PNG عند الضغط الأمثل أقل من 200 بايت. يبلغ حجم إطار BMP المكافئ داخل ملف .ico دائمًا 4 كيلو بايت بغض النظر عن محتوى الصورة.

بالنسبة لأهلية استخدام الأيقونة المفضلة لبحث Google، يتم دعم كل من .ico وPNG. يقوم زاحف Google بإحضار الرمز المفضل المرتبط في HTML أولاً، أو يعود إلى /favicon.ico. الحد الأدنى للمتطلبات هو 48 × 48 بكسل وعنوان URL يمكن الوصول إليه بشكل عام. الحجم المناسب PNG المرتبط بـ `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` يفي بهذا بالإضافة إلى تجميع .ico بنفس الحجم.

يختلف سلوك الوضع الداكن بين التنسيقات. لا يمكن لملفات PNG أن تتكيف مع نظام الألوان الخاص بالمستخدم — ستحتاج إلى JavaScript لتبديل علامة الرابط href ديناميكيًا، وهو أمر هش. لا يحتوي تنسيق .ico على إمكانية الوضع المظلم على الإطلاق. بالنسبة لتكييف الرمز المفضل للوضع الداكن، يدعمه SVG فقط محليًا من خلال كتلة نمط `@media (prefers-color-scheme: dark)` المضمنة. يجب أن يتم إقران PNG و.ico مع تراكب SVG.

يجمع الإعداد الحديث الأمثل بين كلا التنسيقين. استخدم `<link rel='icon' href='/favicon.ico'>` كإجراء احتياطي عالمي، و`<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` لوضوح شبكية العين، و`<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` لدعم الوضع الداكن القابل للتطوير. المتصفحات التي تفهم أيقونات SVG المفضلة تحدد SVG؛ والبعض الآخر يصل إلى PNG؛ المتصفحات القديمة تحصل على .ico.

إن تكامل نظام التشغيل Windows هو نطاق .ico فقط. تقرأ اختصارات سطح المكتب وأيقونات File Explorer ودبابيس شريط المهام Windows تنسيق .ico. إذا قام أي من المستخدمين بتثبيت موقعك على شريط المهام Windows أو قام بإنشاء اختصار على سطح المكتب لعنوان URL الخاص بك، فسيتم استخدام /favicon.ico فقط كرمز الاختصار. يتم تجاهل ملفات PNG بالكامل في هذا السياق.

بالنسبة إلى 180×180 apple-touch-icon، فإن PNG هو التنسيق الصالح الوحيد. لا يقرأ iOS .ico لأيقونات الشاشة الرئيسية - فهو يتطلب تحديدًا ربط PNG عبر `<link rel='apple-touch-icon'>`. هذه إحدى الحالات التي لا يكون فيها PNG مفضلاً فحسب، بل مطلوب أيضًا.

لا ينبغي إغفال تكوين الخادم. تقدم العديد من خوادم الويب .ico بنوع محتوى غير صحيح (`text/plain` بدلاً من `image/x-icon`) إذا لم يتم تكوينه بشكل صريح. تتمتع ملفات PNG بدعم أوسع لنوع MIME عبر منصات الاستضافة. إذا رأيت أن favicon.ico لا يتم تحميله، فتأكد من أن الخادم الخاص بك يعرض `Content-Type: image/x-icon` أو `image/vnd.microsoft.icon` لطلبات ICO.

يقوم favicon generator بإخراج كلا التنسيقين في وقت واحد. ليس عليك الاختيار - تتضمن حزمة التنزيل favicon.ico، وملفات PNG المستقلة بحجم 32×32 و180×180، وSVG للمجموعة الحديثة الكاملة. استخدام هذه الحزمة يعني أنه سيتم الرد على سؤال ICO مقابل PNG تلقائيًا: استخدم كليهما، كل منهما في السياق الذي تتفوق فيه.

للحصول على مقارنة كاملة للتنسيق والتي تغطي أيضًا SVG، راجع best favicon format guide. يشرح هذا الدليل التنسيق الذي سيتم تحديد أولوياته لكل حالة استخدام - موقع الويب القياسي، وPWA، ومتجر التجارة الإلكترونية، وأداة المطور - ويوفر مصفوفة قرار لاختيار مجموعة الرموز المفضلة لديك.