إنشاء أيقونة الموقع
اصنع ملف favicon.ico من أي صورة، وفيه كل مقاس يطلبه المتصفح مجموعًا في ملف واحد.
اصنع أيقونة موقع دون رفع أي شيء
أيقونة الموقع هي الصورة الصغيرة التي يعرضها المتصفح في علامة التبويب وفي المفضلة وبجوار الاختصار. والملف التقليدي لها هو favicon.ico، وهو ليس صورة واحدة في الحقيقة: فحاوية ICO تضم عدة إطارات مربعة، ويأخذ المتصفح منها المقاس الذي يحتاجه. تفتح هذه الصفحة محوّل الصور مع اختيار إخراج ICO والإطارات الأربعة المعتادة، فتُفلِت شعارك وتستعيد هذا الملف مباشرة.
كل شيء يجري داخل متصفحك. تُرسم الإطارات على لوحة رسم وتُجمَّع الحاوية بايتًا بايتًا داخل الصفحة، فلا يغادر شعارك جهازك أبدًا، وهو ما يهمّ ما دام التصميم لم يُعلن بعد.
ماذا يضم الملف
| الإطار | أين يستخدمه المتصفح |
|---|---|
| 16 بكسل | علامة التبويب وقائمة المفضلة |
| 32 بكسل | الشاشات عالية الكثافة وشريط العنوان وعلامات التبويب المثبّتة |
| 48 بكسل | اختصارات ويندوز وبعض سياقات سطح المكتب |
| 256 بكسل | أيقونات الاختصارات الكبيرة وكل ما يكبّر الأيقونة |
تقدّم قائمة أحجام الأيقونة أيضًا المجموعة التقليدية الثلاثية «16 و32 و48 بكسل»، أو «256 بكسل فقط» و«32 بكسل فقط» حين تعرف تمامًا ما تريد. ولأن الإطارات مربعات ثابتة، لا ينطبق هنا إعداد الجودة ولا تغيير المقاس، وتخفيهما الصفحة.
ابدأ من الصورة المناسبة
- المربع أفضل من العريض. تُلاءَم الصورة غير المربعة داخل المربع بهوامش شفافة، فينتهي الشعار العريض صغيرًا في الوسط. اقتصّه أولًا إلى مربع، أو استخدم الرمز وحده بدل الشعار الكامل بنصّه.
- البسيط أفضل من المفصّل. عند 16 بكسل يصير سطر النص لطخة رمادية. وأكثر الأيقونات قابلية للتمييز هي حرف واحد أو شكل واحد أو ظلّ واحد.
- امنحها تباينًا. تستقر الأيقونة على خلفية المتصفح نفسه، وهي فاتحة في سمة وداكنة في أخرى. والشكل الذي لا يظهر إلا على الأبيض يختفي في الوضع الداكن.
- ابدأ من مقاس كبير. أدخِل صورة لا تقل عن 256 بكسل حتى لا يُكبَّر أكبر إطار؛ فالإطارات الأصغر تنتج من التصغير، وهناك يضيع التفصيل بسلاسة.
وضعها في موقعك
يكفي وضع favicon.ico في جذر الموقع لكل المتصفحات، لأنها جميعًا تبحث هناك افتراضيًا. وللتصريح بذلك، أو لتقديم ملف PNG إلى جانبه، أضف وسم link داخل head الصفحة: <link rel="icon" href="/favicon.ico" sizes="any">. وتُرفق مواقع كثيرة مع ملف .ico صورة PNG بمقاس 180 بكسل من أجل apple-touch-icon، ويمكنك إنتاجها هنا أيضًا بإعادة الإخراج إلى PNG وتغيير المقاس.
وإذا ظلت الأيقونة القديمة تظهر بعد استبدال الملف، فالسبب التخزين المؤقت لا ملف معطوب: تحتفظ المتصفحات بأيقونات المواقع مدة طويلة. وإعادة تحميل قسرية، أو إضافة ?v=2 إلى وسم link، تحسم الأمر.
صيغ أخرى من الأداة نفسها
يكتب المحوّل أيضًا PNG وJPG وWebP، ويستطيع الضغط إلى حجم مستهدف بالكيلوبايت. وإن كنت هنا من أجل تحويل عادي لا من أجل أيقونة، فإن PNG إلى JPG وPNG إلى WebP تبدآن بتلك الصيغ مباشرة.