الـ favicon لم يعد صورة واحدة. المتصفحات والهواتف وأنظمة التشغيل يأخذ كلٌ مقاساً مختلفاً لخانة مختلفة — لسان المتصفح، إشارة مرجعية، شاشة iOS الرئيسية، مبدّل تطبيقات Android. أطلق PNG واحداً 32×32 فيعمل في اللسان لكن يبدو ضبابياً حين يحفظ أحدهم موقعك على هاتفه. أطلق الطقم الكامل فيحصل كل سطح على أيقونة حادة.
إليك بالضبط أي المقاسات تحتاجها، ماذا يفعل كلٌ، ولماذا تبدو القائمة كما تبدو.
المقاسات المهمة
معظم المواقع مغطّاة بستة مقاسات PNG مع .ico قديم. إليك المرجع:
| المقاس | الصيغة | أين يُستخدم |
|---|---|---|
| 16×16 | PNG (في .ico) | لسان المتصفح، شريط العنوان، الإشارات المرجعية |
| 32×32 | PNG (في .ico) | ألسنة Retina، اختصارات شريط مهام Windows |
| 48×48 | PNG | أيقونات مواقع Windows، بعض أسطح Android |
| 180×180 | PNG | شاشة iOS الرئيسية (apple-touch-icon) |
| 192×192 | PNG | شاشة Android الرئيسية، تثبيت PWA |
| 512×512 | PNG | شاشة بداية PWA، متاجر التطبيقات، DPI عالٍ |
ملف favicon.ico حاوية تجمع المقاسات الصغيرة (عادة 16 و32، وأحياناً 48). المتصفحات الأقدم وWindows تبحث عنه بالاسم في جذر موقعك، فما زال يستحق الإطلاق رغم أن المتصفحات الحديثة تستخدم PNG بسرور.
لماذا هذا العدد؟ جولة سريعة
سبب طول القائمة أن الأيقونة تظهر بأحجام مادية مختلفة تماماً.
16 و32 أيقونتا اللسان اليوميتان. 16 المقاس الكلاسيكي؛ و32 يغطّي شاشات DPI العالي ("Retina") حيث يبدو 16 ناعماً. المتصفحات تنتقي ما يلائم كثافة البكسل.
48 أمر Windows — يُستخدم لاختصارات المواقع ويظهر أحدّ في أماكن قليلة لا يغطّيها 32 جيداً.
180 هو apple-touch-icon من Apple. حين ينقر أحدهم "إضافة إلى الشاشة الرئيسية" على iPhone أو iPad، يستخدم iOS هذا. أخطئه فيأخذ iOS إما لقطة شاشة مصغّرة أو يعرض بطاقة حرف عادية — لا أحدهما يبدو كعلامتك.
192 و512 مقاسا تطبيق الويب التقدّمي، مُعلَنان في ملف manifest.webmanifest. 192 أيقونة شاشة Android الرئيسية؛ و512 يغذّي شاشة البداية ويُصغَّر لأي شيء آخر يحتاجه النظام. إن كان موقعك قابلاً للتثبيت، فهذان غير قابلين للتفاوض.
هل تحتاج أكبر من 512؟
لا. 512×512 هو السقف العملي لأيقونات الويب — مواصفة webmanifest وكل منصة رئيسية تتوقّف عند هناك تقريباً. إن كان فنّك المصدر 1024 أو أكبر، فذلك جيد كصورة بداية (تفاصيل أكثر للتصغير منها)، لكنك لا تطلق favicon بـ 1024. أي شيء فوق 512 يضيف فقط بايتات لا يستخدمها أحد.
القاعدة الوحيدة المهمة صعوداً: ابدأ من مصدر كبير مربع. أصل 512×512 أو 1024×1024 يُصغَّر بنظافة إلى كل مقاس تحته. ابدأ من صورة صغيرة فتبدو المقاسات الصغيرة موحلة لأنه لم يكن هناك أصلاً تفاصيل كافية لإبقائها.
صمّم كي ينجو من 16×16
أصعب مقاس هو الأصغر. عند 16×16 يصبح شعار مفصّل لطخة غير مقروءة. بعض النصائح التي تصمد عبر المواقع:
- بسّط. علامة كلمة كاملة لن تُقرأ بـ 16px. استخدم حرفاً واحداً، أو حرفاً مركّباً، أو أكثر جزء يمكن التعرّف عليه من علامتك.
- أبقِ التباين عالياً كي يبقى الشكل مقروءاً على خلفيات ألسنة فاتحة وداكنة معاً.
- اترك قليلاً من الهامش — أيقونة تلمس الحواف الأربع تبدو محشورة في اللسان.
- اختبرها صغيرة. صغّر متصفحك، أو انظر إلى اللسان الفعلي. إن لم تستطع تمييز ما هي بلمحة، بسّط أكثر.
توليد الطقم كاملاً
لا تبني هذه يدوياً. ضع صورة مربعة واحدة في مولّد Favicon فينتج الطقم الكامل دفعة — favicon.ico، ملفات PNG بـ 16/32/48/180/192/512، وملف webmanifest جاهز للاستخدام، ومقتطف HTML الدقيق لـ <head> للصقه. كل شيء يعمل في متصفحك: الصورة لا تُرفع أبداً، وبعد زيارتك الأولى تعمل الأداة دون اتصال.
HTML الذي ستنتهي به
للمرجع، إعداد favicon كامل يبدو تقريباً هكذا في <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
المولّد يكتب هذا لك، فتلصقه مباشرة. غطِّ المقاسات الستة مع .ico والـ manifest، فيحصل كل متصفح وهاتف ونظام تشغيل على الأيقونة الحادة التي يطلبها.