كيف يمكنني إنشاء حزمة favicon من PNG دون التسجيل؟
الملفات السبعة التي ينتجها مولد الأيقونات لدينا من PNG واحد، وما يقرأ كل منها، وأين تذهب على الخادم الخاص بك ولماذا تظهر الأجزاء الشفافة بشكل صلب.
الفافيكون ليس ملفًا. إنه مجموعة منها، لأن علامة تبويب المتصفح، وشاشة البداية على iOS، ومطالبة التثبيت على Android كل منها تطلب صورة مختلفة بحجم مختلف. قم بإسقاط PNG واحد في مولد الأيقونات وستخرج سبعة ملفات من الطرف الآخر. إليك ما هو كل منها، وأين يجب أن يكون على الخادم الخاص بك، وأي منها يمكنك تخطيه.
تعمل العملية بالكامل داخل الصفحة. لا يوجد مسار API ولا أي إجراء خادم في هذا التطبيق، لذا يتم قراءة شعارك باستخدام createImageBitmap، ورسمه في OffscreenCanvas وترميزه إلى PNG بواسطة متصفحك الخاص. لا حاجة لحساب ولا وعد بحذف عملك الفني خلال ساعة.
ما هي الملفات السبعة، وماذا يفعل كل منها؟
سبعة ملفات، صورة مصدر واحدة. الأحجام أدناه تأتي من تشغيل حقيقي مع alpha.png، وهو PNG شفاف بحجم 900 × 606 بكسل بحجم 942.4 KB. ستختلف أعداد البايت الخاصة بك لأنها تعتمد على مقدار التفاصيل التي تبقى في كل حجم، لكن أسماء الملفات وأبعاد البكسل ثابتة بواسطة الأداة.
| الملف | الحجم من تشغيلنا | ما يقرأه |
|---|---|---|
| favicon.ico | 4.6 KB | المتصفحات، يتم جلبها تلقائيًا من جذر الموقع. تحتوي على 16 و 32 و 48. |
| favicon-16x16.png | 521 B | شريط علامات التبويب على الشاشات ذات الكثافة القياسية. |
| favicon-32x32.png | 1.4 KB | علامات التبويب والإشارات المرجعية على الشاشات ذات الكثافة الأعلى. |
| apple-touch-icon.png | 28.4 KB | سفاري على iOS عندما يضيف شخص ما موقعك إلى الشاشة الرئيسية. 180 بكسل. |
| android-chrome-192x192.png | 31.9 KB | مدرج في site.webmanifest كأيقونة 192. |
| android-chrome-512x512.png | 196 KB | مدرج في site.webmanifest، يستخدم لمطالبات التثبيت وشاشات البداية. |
| site.webmanifest | 371 B | المتصفحات تقرأ name و short_name و theme_color و background_color و display. |
لا تحتاج إلى جميع السبعة. إذا كانت علامات التبويب على سطح المكتب هي كل ما يهمك، فإن favicon.ico وحده يقوم بالمهمة. يبدأ ملف Apple في الأهمية بمجرد أن يقوم شخص ما بحفظ موقعك على الشاشة الرئيسية، وملف PNG الخاص بـ Android لا يكسب مكانه إلا إذا قمت فعليًا بشحن البيان.
أين تذهب الملفات، وماذا يجب أن يكون في الرأس؟
تذهب جميع السبعة إلى جذر الويب، لذا يتم حلها كـ /favicon.ico و /apple-touch-icon.png وهكذا. في Next.js، هذا هو المجلد العام. ثم يجب أن تضع أربعة علامات في رأسك: رابط apple-touch-icon واحد بحجم 180 × 180، ورابطين rel=icon لحجم 32 و 16، ورابط واحد إلى البيان. تقوم الأداة بطباعة تلك الشيفرة بجانب النتائج مع زر نسخ.
site.webmanifest هو 371 بايت من JSON يحتوي على name و short_name و الأيقونتين الخاصتين بـ Android و theme_color و background_color و display تم تعيينه على standalone. يتم كتابة مسارات الأيقونات بالداخل بشكل مطلق، مثل /android-chrome-192x192.png، لذا فإن وضع الحزمة في /assets/icons/ يكسرها بهدوء وستحتاج إلى تعديل كلا قيم src. فخ آخر: إذا تركت كلا مربعين الاسم فارغين في اللوحة، فإن البيان سيشحن بالاسم الحرفي "My App"، وهو ما ستطبعه الهاتف تحت أيقونتك.
لماذا لا يوجد favicon.ico في تلك الشيفرة؟
لأن المتصفحات تطلبه دون أن يُقال لها. لا حاجة لعلامة. يصف قسم rel=icon في مواصفة HTML تقليد /favicon.ico: عندما يعلن مستند ما عن عدم وجود رابط أيقونة، يحاول المتصفح ذلك المسار الجذري بنفسه. لهذا السبب يعمل .ico بدون أي تعليمات برمجية، ولذا يجب أن يعيش الملف في الجذر. النسخة الموجودة في /images/ لا يتم طلبها أبدًا. إذا كنت بحاجة إليها في مكان آخر، أضف رابط أيقونة صريح يشير إلى مسارك ويتوقف التخمين.
ما هو موجود فعلاً داخل favicon.ico؟
.ico هو حاوية. يحتوي على ثلاثة PNGs، تم عرضها بحجم 16 و 32 و 48 بكسل، خلف رأس 6 بايت بالإضافة إلى إدخال دليل 16 بايت لكل صورة، وهو 54 بايت من الهيكل ملفوف حول بيانات الصورة. هكذا يغطي ملف واحد بحجم 4.6 KB ثلاثة أحجام: يقرأ المتصفح الدليل، ثم يسحب الإدخال الذي يتطابق مع ما يرسمه. تخطيط بايت ذلك الدليل، ولماذا لا يتناسب أي شيء أكبر من 256 فيه هو جزء خاص به. لقد فهمت Windows حمولات PNG داخل .ico منذ Vista وتتعامل المتصفحات الحالية معها بدون شكوى.
لماذا خرج PNG الشفاف الخاص بي مع خلفية صلبة؟
لأن كل لوحة أيقونة يتم ملؤها قبل أن تهبط عليها شعارك. التحكم في الخلفية هو input type=color، الذي لا يحمل قناة ألفا، لذا فإن التعبئة دائمًا غير شفافة والافتراضي هو #ffffff. أي شفافية كانت لديك في المصدر يتم تسويتها ضد ذلك اللون. لا يوجد خيار شفاف هنا. اختر اللون الذي يتناسب مع السطح الذي ستجلس عليه العلامة قبل أن تضغط على توليد.
الشكل مهم أيضًا. alpha.png هو 900 × 606 والأيقونات مربعة، لذا يتم ضبط العمل الفني داخل المربع مع محوره الطويل بعرض كامل، وتملأ خلفية اللون الحواف أعلاه وأسفل. إذا كانت تلك الحواف تزعجك، قم بتربيع الصورة أولاً في أداة القص، التي تأخذ ملفًا واحدًا يصل إلى 10 MB وتقدم إعدادًا 1:1 من بين ثمانية نسب عرض إلى ارتفاع. ينزلق شريط الهامش في لوحة الأيقونات من 0 إلى 30% ويقوم بإدخال العمل الفني بالتساوي على جميع الجوانب الأربعة.
هل 196 KB كبير جدًا لملف أيقونة؟
196 KB لملف android-chrome-512x512.png يبدو مقلقًا بجانب ملف 16px بحجم 521 بايت. هناك أمران يخففان الضغط. تلك الأيقونة لا يتم جلبها في عرض الصفحة العادي، حيث أن علامة التبويب تريد دائمًا الصغيرة فقط، و PNG مباشرة من مشفر اللوحة ليس مُحسنًا: convertToBlob يكتب ملفًا صالحًا بدون أي من العمل على الفلتر واللوحة الذي يقوم به مُحسن مخصص. إنه نفس مشفر المتصفح الذي يشكل أحجام الملفات في قياسات JPG إلى PDF.
يمكنك تقليصه عن طريق إعادة تشغيل PNG من خلال الضاغط. على نفس alpha.png بحجم 942.4 KB، هبط الوضع غير المفقود (oxipng level 3) عند 383.9 KB، بانخفاض 59% دون تغيير أي بكسل. وضع الملف الأصغر (imagequant) وصل إلى 98.3 KB، بانخفاض 90%، عن طريق تقليل الصورة إلى لوحة. شعار مسطح مع عدد قليل من الألوان هو بالضبط حيث لا تكلفك اللوحة شيئًا يمكنك رؤيته. احتفظ به غير مفقود إذا كانت أيقونتك فوتوغرافية.
هل أحتاج إلى التسجيل، وهل يتم تحميل شعاري؟
لا تسجيل ولا شيء لتحميله. لا توجد مسارات API ولا إجراءات خادم في قاعدة الشيفرة هذه، والطلبات الوحيدة التي تقوم بها الصفحة هي جلبات من نفس الأصل لأصولها الخاصة. افتح لوحة الشبكة الخاصة بك أثناء التوليد وشاهدها تبقى هادئة. صفحة الخصوصية الخاصة بنا تلخص ذلك بكلمات أقل من هذه الفقرة.
الحدود هي ملف واحد في كل مرة و 10 MB، وتقبل منطقة الإسقاط PNG و JPEG و WebP و AVIF و GIF و SVG. يتم تحويل SVG أولاً إلى أكبر أبعاده أو 512 بكسل، لذا حتى مصدر 64px لا يزال ينتج أيقونة نظيفة بحجم 512. يتم تحميل هذا العرض في عنصر <img>، نفس المسار المقيد الذي يمنع الخطوط الخارجية والبتات المرتبطة من SVG. كل شيء يأتي كحزمة favicon-package.zip تحتوي على جميع الملفات السبعة. إذا وصل شعارك كإخراج كبير الحجم، قم بإعادة حجمه أولاً حتى لا تقوم بإدخال لافتة بحجم 20 ميجابكسل في مربع بحجم 16 بكسل.
قم بذلك بعد ذلك: افتح مولد الأيقونات، اسقط شعارك، اضبط لون الخلفية ليتناسب مع المكان الذي ستجلس فيه الأيقونة، توليد، فك الضغط إلى جذر الويب الخاص بك، ألصق الأربعة علامات في رأسك وأضف "start_url": "/" إلى site.webmanifest. ثم قم بإعادة تحميل الموقع بشكل قاسي وانظر إلى علامة التبويب. إذا كانت النسخة بحجم 16px تظهر كلطخة، عد إلى الوراء وبسط العلامة قبل أن تغير أي شيء آخر. ملاحظات تكوين تطبيقات الويب من Apple تستحق القراءة إذا كانت شاشة البداية على iOS هي أولويتك.