هل لا زلت بحاجة إلى favicon.ico، أم أن PNG كافية؟
ICO هو تنسيق دليل يجمع 16 و 32 و 48 في ملف واحد بحجم 4.6 KB. ما بداخله، ولماذا لا تحل PNG محله والسبعة ملفات التي يجب شحنها.
كل بضع سنوات، يعلن شخص ما أن favicon.ico قد مات. ثم يطلب قارئ الخلاصات أو اختصار Windows قديم /favicon.ico، ويحصل على 404 ويظهر رمز صفحة فارغ. تكلفة شحن ICO هي 4.6 KB. هذه هي الحجة الكاملة، ولهذا لا يزال مولد الأيقونات لدينا يكتب واحدة.
قم بإدخال alpha.png، وهي صورة بحجم 900x606 مع شفافية، وستخرج سبعة ملفات: favicon.ico بحجم 4.6 KB، favicon-16x16.png بحجم 521 B، favicon-32x32.png بحجم 1.4 KB، apple-touch-icon.png بحجم 28.4 KB واثنين من PNGs android-chrome بحجم 31.9 KB و 196 KB، بالإضافة إلى 371 B site.webmanifest. يقوم متصفحك بكتابة جميع السبعة. لقد بنيناها بهذه الطريقة لأن هذا التطبيق ليس لديه أي مسارات API على الإطلاق، وهو ما لا يمكن أن تقوله أي موقع favicon على جانب الخادم عن نفسه.
ما الذي يوجد فعلاً داخل ملف .ico؟
ICO هو تنسيق دليل. يفتح الملف بستة بايت: كلمة محجوزة مضبوطة على 0، وكلمة نوع مضبوطة على 1 للأيقونات وعدد الصور التي تتبع. بعد ذلك يأتي إدخال واحد بحجم 16 بايت لكل صورة، يحمل العرض والارتفاع وعدد الألوان وبايت محجوز وطبقات الألوان والبتات لكل بكسل وطول بايت بيانات الصورة وإزاحتها من بداية الملف. ثم الحمولة، متصلة. وثيقة أيقونات مايكروسوفت المؤرشفة من عام 1995 توثق هذين الهيكلين كـ ICONDIR و ICONDIRENTRY، ولم يتغيرا.
يحصل العرض والارتفاع على بايت واحد، وهذا هو السبب في أن 256x256 يجب تخزينها كـ 0 ولماذا لا يتناسب أي شيء أكبر من 256 في الدليل على الإطلاق. يقوم المشفر لدينا بكتابة 1 طبقة لون و32 بت لكل بكسل لكل إدخال، وكل حمولة هي PNG عادي. تصف المواصفات من عام 1995 DIB متبوعًا بقناع AND بحجم 1 بت للشفافية، وهو ما يفسر لماذا كانت الأيقونات القديمة تحتوي على تلك الحواف الحادة. ثلاث صور تعني 6 بايت من الرأس بالإضافة إلى 48 بايت من الدليل. هذا 54 بايت من الأعمال الورقية، وكل شيء آخر في 4.6 KB هو بيانات PNG.
لماذا تحتوي favicon.ico واحدة على 16 و 32 و 48؟
هذه هي الأحجام الثلاثة التي يجمعها، وليست عشوائية. تخبر الوثيقة نفسها من مايكروسوفت المطورين بتضمين 16x16 و32x32 و48x48 في كل مورد أيقونة، ثم توضح قاعدة الاختيار: الصورة الأقرب في الحجم إلى الحجم المطلوب تفوز. يطلب شريط التبويب 16. على شاشة عرض 2x، يريد نفس موضع 16 بكسل CSS 32 بكسل حقيقي، ويطلب اختصار سطح مكتب Windows 48. إذا كانت ICO لديك تحتوي فقط على 16، فسيحصل الاختصار على صورة 16 بكسل تمتد إلى 48، وستبدو بالضبط هكذا.
إذا كانت المتصفحات تقرأ PNG، فلماذا نشحن ICO على الإطلاق؟
لأن الاثنين يتم اكتشافهما بطرق مختلفة. المقتطف المكون من أربعة أسطر الذي يقدمه لك أداتنا يسمي ملفات PNG مع نوع صريح وتلميحات بالحجم، وأي عميل يقوم بتحليل `<head>` سيأخذ تلك. تُظهر مرجع `<link>` من MDN نفس الشكل، عدة روابط أيقونات تتيح للمتصفح الاختيار. يتيح المعيار HTML أيضًا لوكيل المستخدم البحث عن /favicon.ico حسب المسار عندما لا يتم إعلان رابط أيقونة، والعديد من الأشياء التي تجلب عنوان URL الخاص بك لا تقرأ التعليمات البرمجية الخاصة بك. تعتبر أيقونات SVG مغرية هنا، و caniuse تضع دعمها العالمي عند 90.49% مع Safari فقط يلتقطها في الإصدار 26.0. هذا يترك ذيلًا حقيقيًا.
ما هي السبعة ملفات وما وزنها؟
| الملف | البكسلات | الحجم | ما الذي يقرأه |
|---|---|---|---|
| favicon.ico | 16 و 32 و 48 مجمعة | 4.6 KB | مسار /favicon.ico الاحتياطي، اختصارات Windows |
| favicon-16x16.png | 16x16 | 521 B | شريط التبويب عند 1x، عبر علامة الرابط |
| favicon-32x32.png | 32x32 | 1.4 KB | شريط التبويب عند 2x، عبر علامة الرابط |
| apple-touch-icon.png | 180x180 | 28.4 KB | شاشة الرئيسية على iOS، عبر علامة الرابط |
| android-chrome-192x192.png | 192x192 | 31.9 KB | مجموعة رموز البيان |
| android-chrome-512x512.png | 512x512 | 196 KB | مجموعة رموز البيان |
| site.webmanifest | n/a | 371 B | مطالبة التثبيت |
512 هو الأكثر هيمنة. أضف ICO، وكلا PNGs الصغيرة، وapple-touch-icon و192 معًا وستكون تحت 67 KB مجتمعة، مقابل 196 KB لذلك الملف الواحد. من الجيد معرفة أي من تلك الملفات يكلفك شيئًا على عرض الصفحة، لأن ICO واثنين من PNGs الصغيرة فقط هما المعنيان هنا.
لماذا يجلس شعاري الشفاف على مربع أبيض؟
لأن المولد يرسم القماش قبل أن يرسم عملك الفني، والملء الافتراضي هو #ffffff. هذا التحكم هو إدخال لون، لذا هناك دائمًا لون ما تحتها. قم بتعيينه إلى اللون السداسي لعلامتك التجارية وستتناسب المجموعة بأكملها مع موقعك. دخلت alpha.png مع قناة ألفا وخرجت كل واحدة من الصور السبع غير شفافة، وهو ما يفاجئ الأشخاص الذين يتوقعون favicon شفاف.
شريط الهامش يعمل من 0 إلى 30 بالمئة ويقوم بإدخال عملك الفني بنسبة تلك الحصة من حافة كل أيقونة، لذا عند 10 بالمئة، يحتفظ أيقونة بحجم 32 بكسل بهامش 3 بكسل على كل جانب. هذه كمية مرئية عند ذلك المقياس. المصادر غير المربعة تحصل على حواف: شعار بحجم 900x606 يحتفظ بنسبة العرض إلى الارتفاع ويكتسب أشرطة خلفية فوق وتحت. اجعلها مربعة أولاً إذا كان ذلك يزعجك. القصاص لديه إعداد 1:1، يأخذ ملفًا واحدًا في كل مرة حتى 10 MB ويعيد ترميز التنسيقات المفقودة بجودة ثابتة 92. إذا كنت تفضل تغيير الحجم بدلاً من القص، فإن أداة تغيير الحجم لديها إعدادات نسبية عند 25 و 50 و 75 مع أوضاع تغطية، احتواء ومد تناسب.
كيف يمكنني تحويل ICO مرة أخرى إلى PNG؟
استخدم ICO to PNG. يقوم بتحليل الحاوية، ويمشي عبر إدخالات الدليل ويحتفظ بتلك التي لها أكبر عرض، ثم يكتب ذلك كـ PNG. وجهه إلى الملف بحجم 4.6 KB أعلاه وستحصل على صورة بحجم 48x48، لأن 48 هو أكبر شيء مجمع هناك. لا يمكنه استعادة التفاصيل التي لم تكن موجودة في الملف. إذا كنت بحاجة إلى شيء أكبر، فإن أداة التكبير تعمل على Real-ESRGAN في متصفحك وتخرج دائمًا PNG؛ اختبارنا small.png بحجم 400x269 عاد كـ 800x538 على إعداد 2x. سواء كانت إعادة البناء أو الاستيفاء العادي هي الأداة الصحيحة يعتمد على ما هو الغرض من الأيقونة. من الجيد معرفة: النموذج ينتج فقط 4x داخليًا، لذا فإن 2x هو تقليص يتم تطبيقه بعد ذلك. محولنا يغطي 24 زوجًا عبر 11 تنسيقًا ويكتب ICO لأي منها.
هل أيقونة بحجم 196 KB كبيرة جدًا؟
هذه هي android-chrome-512x512.png، وهي أثقل شيء في المجموعة بمسافة. يتم جلبها عندما يقوم شخص ما بتثبيت موقعك كتطبيق، وهو ما تحكمه مواصفات W3C Web App Manifest، لذا فهي لا تجلس على المسار الحرج لتحميل صفحة عادية. لا يزال بإمكانك تقليصها. ضاغطنا يقدم وضعين PNG يتصرفان بشكل مختلف تمامًا: "PNG بدون ضغط" يعمل oxipng على المستوى 3 ويظل بدون فقد، بينما "PNG بحجم ملف أصغر" يكمم إلى لوحة ألوان مكونة من 256 لونًا باستخدام imagequant. على alpha.png، بحجم 942.4 KB عند المصدر، أعطى المرور بدون فقد 383.9 KB ومرور اللوحة أعطى 98.3 KB. عادة ما ينجو الشعار المسطح من 256 لونًا دون أن يلاحظ أحد. كما أن الضغط يزيل كل قطعة من البيانات الوصفية، بما في ذلك EXIF و ICC، وهو ما تريده تمامًا لأيقونة.
إليك الخطوة التالية المحددة. افتح مولد الأيقونات، ضع أكبر مصدر مربع لديك (يقبل JPEG و PNG و WebP و AVIF و GIF و SVG حتى 10 MB، ملف واحد)، اضبط لون الخلفية على اللون السداسي لعلامتك التجارية، اترك الهامش عند 0 وولد. انسخ علامات الرابط الأربعة إلى `<head>`، وقم بتحميل favicon.ico إلى جذر الويب الخاص بك وانتهيت. إذا كنت تريد التأكد من أن لا شيء غادر جهازك، راقب علامة الشبكة أثناء تشغيله، أو اقرأ صفحة الخصوصية الخاصة بنا. أين تنتمي كل من الملفات السبع على خادمك مكتوب بالكامل بشكل منفصل.