إنشاء أيقونات Favicon

لماذا صارت الأيقونة الواحدة تسعة ملفات

كل ملف في المجموعة موجود لأن جهة محددة تقرؤه ولا تقرأ غيره. favicon.ico الذي يحمل المقاسات 16 و32 و48 هو ما يبحث عنه المتصفح افتراضيًا في جذر الموقع، وما تفحصه برامج قديمة كثيرة أولًا. وfavicon-16x16.png وfavicon-32x32.png هما ما تفضّله المتصفحات الحالية للتبويب، لأن ملف PNG بالمقاس الدقيق أفضل من التحجيم. وapple-touch-icon.png بمقاس 180 بكسل هو ما يضعه iOS على الشاشة الرئيسية — ولا يدعم الشفافية، لذا يُدمج فوق خلفية مصمتة بدل أن يصل بزوايا سوداء. أما android-chrome-192x192.png و512x512.png فهما ما يستخدمه تطبيق الويب التقدمي المثبَّت لأيقونة المشغّل وشاشة البداية، ويُعلَن عنهما في site.webmanifest.

تقديم ملف PNG كبير واحد لكل ذلك يعمل بشكل سيئ في كل مكان، وهو الاختصار الأكثر شيوعًا. فالمتصفح ينزّل نصف ميغابايت ليرسم ستة عشر بكسلًا، وiOS يتجاهل قواعد الشفافية ويضع شعارك على مربع أسود، وأيقونة المشغّل تُقص بأي قناع تطبّقه المنصة. والمجموعة مرهقة تحديدًا لأن لكل جهة شروطها الخاصة.

مقتطف HTML لا يقل أهمية عن الصور. فالمتصفحات لا تكتشف معظم هذه الملفات وحدها — وحده favicon.ico في الجذر يُعثر عليه بحكم العُرف — لذا فوسوم link هي ما يربطها، وملف manifest يحتاج وسمًا خاصًا به. ويستخدم المقتطف مسارات نسبية إلى الجذر تعمل دون تعديل ما دامت الملفات في المجلد الجذر للموقع؛ وإن وضعتها في مجلد فرعي، فستحتاج المسارات في المقتطف وفي ملف manifest كليهما إلى تعديل.

صمّم لمقاس 16 بكسل أولًا. في هذا المقاس لديك متسع لشكل واحد وربما لونين — لا نص، ولا تدرّج لوني، ولا تفاصيل دقيقة، ولا شعار نصي كامل بالتأكيد. والصورة المصدر المربعة الجريئة عالية التباين بمقاس 512 بكسل على الأقل، أو ملف SVG، تعطي أنظف مجموعة؛ وتعرض المعاينة شكل مقاس 16px بصدق لا بتجميل، لأنه المقاس الذي سيخيّب ظنك لاحقًا. والصور المصدر غير المربعة تُكمَّل إلى مربع بهوامش شفافة بدل أن تُقص أو تُمطّ.

عندما تحتاج إلى شيء آخر

المجموعة التي تُنشأ هنا هي النواة الحديثة العملية. وإن احتجت إلى الذيل الطويل كاملًا — صور بلاطات ويندوز، وأيقونة القناع لتبويبات Safari المثبّتة، وملف browserconfig من Microsoft، ومقاسات Apple القديمة — فإن RealFaviconGenerator يغطيها ويفحص موقعك المنشور بعد ذلك، وهي ميزة مفيدة حقًا لا تستطيعها هذه الأداة.

أما في خط البناء (build pipeline)، فإنشاء الأيقونات يدويًا هو الأسلوب الخطأ تمامًا. فأدوات favicons وpwa-asset-generator وإضافات أُطر العمل المبنية على sharp تنتج المجموعة كاملة من ملف مصدر واحد في كل عملية نشر، فلا يمكن أن تتقادم الأيقونات حين يتغير الشعار — وهو ما يحدث دائمًا في الواقع.