أيقونة الموقع راكمت متطلّبات خمسًا وعشرين سنة ولم تتخلّص من شيء منها تقريبًا، فالنصائح التي تجدها متحف: ألوان مربّعات Windows، وعشرات مقاسات Apple، وصيغ لمتصفّحات لم تعد موجودة. كلّه تقريبًا يمكن أن يذهب.
كيف تصنع أيقونة موقع في Canva
صمّم 512 × 512، وصدّر PNG
Canva مكان جيّد لرسم المربّع — اجعله 512 × 512 ليكون هناك مجال للتصغير — لكنها تصدّر ملف PNG، وذلك نصف أيقونة موقع فقط. الباقي هو إنتاج المقاسات الأصغر وملف .ico، وتوجيه الصفحة إليها. ذلك الجزء آلي، وهو ما تفعله الأداة أدناه بالملف PNG الذي صدّرته للتوّ.
ما يحتاج أن يوجد فعلًا
ملف SVG. الجواب الحديث، والذي يحلّ أكثر شيء دفعة واحدة. حادّ عند أي مقاس على أي شاشة، وأصغر عادةً من ملفات PNG التي يحلّ محلّها، ويستطيع الاستجابة للوضع الداكن. كل متصفّح حالي يقبله.
ملف ICO، يحوي نسختي 16 و32 بكسلًا. هذا هو البديل الاحتياطي، وسبب إبقائه أن أشياء كثيرة جدًّا ما زالت تطلب /favicon.ico من جذر الموقع دون أن يُطلب منها: قارئات التغذيات، وعملاء المحادثة التي تفتح الروابط، والمتصفّحات الأقدم، وزواحف شتّى. إرضاؤها كلّها يكلّف بضعة كيلوبايتات.
ملف PNG بمقاس 180 × 180 لـapple-touch-icon، يُستعمل حين يحفظ أحدهم الموقع على الشاشة الرئيسية في iOS. بدونه تصير الأيقونة لقطة شاشة لصفحتك، وهو ما لم يرده أحد قطّ.
ملف PNG بمقاس 512 × 512 مشار إليه من بيان ويب، لشاشات Android الرئيسية وتطبيقات الويب القابلة للتثبيت. ثم وجود 192 إلى جانبه عرف شائع لا ضرر فيه.
تلك أربعة ملفات. كل ما عداها موجود لخدمة منصّات إمّا تقرأ هذه بدلًا منها وإمّا كفّت عن الوجود.
لماذا ملف ICO حاوية
صيغة ICO ليست صيغة صورة حقًّا بقدر ما هي غلاف يحمل عدّة صور بمقاسات مختلفة، ونظام التشغيل يختار ما يريده. لهذا يمكن أن تكون «أيقونة 16×16» و«أيقونة 32×32» الملف نفسه.
هذا يهمّ لأن المقاسين يريدان رسمًا مختلفًا، وهو مقصد القسم التالي. وضع رسم واحد بـ32 بكسلًا وترك كل شيء يصغّره إلى 16 ينقض غرض الصيغة كلّه.
القيد الذي لا يذكره أحد
أيقونة بـ16 بكسلًا هي 256 بكسلًا في المجموع. ذلك أصغر من نقطة نهاية الجملة في هذه الفقرة على شاشتك. هي ليست لوحة صغيرة؛ هي بالكاد لوحة.
كل أيقونة فاشلة تفشل الطريقة نفسها تقريبًا: أخذ أحدهم شعارًا — شعارًا مكتوبًا، أو رمزًا مفصّلًا، أو شيئًا بحدّ رفيع — ثم غيّر مقاسه إلى 16 بكسلًا. النتيجة لطخة رمادية، ولا ينقذها أي قدر من التحديد، لأن المعلومة ليست مضبَّبة. هي زالت.
الذي ينجح عند ذلك المقاس هو شكل واحد، ولون أو لونان، وخطوط سميكة. حرف واحد. شكل ظلّي. علامة هندسية. فإن كان شعارك اسم شركة، فالأيقونة هي حرفه الأول، وليس ذلك تنازلًا — بل هو ما تكونه فعلًا كل أيقونة موقع مميّزة تستطيع تخيّلها.
الفحص الصادق هو أن تنظر إليها بمقاسها الحقيقي، في تبويب حقيقي، بجوار ثمانية تبويبات أخرى. لا مكبَّرة 400% في محرّر، حيث يبدو كل شيء جيّدًا.
الوضع الداكن
أشرطة تبويبات المتصفّحات داكنة لشريحة كبيرة من الناس اليوم، والعلامة المرسومة بما يقارب الأسود تختفي عليها.
الجواب المتين ليس ملفًا ثانيًا. بل تصميم العلامة لتنجو في الحالين: ألوان متوسّطة الدرجة بدل ما يقارب الأسود أو الأبيض، وبلا اعتماد على وجود خلفية بيضاء. فالعلامة التي لا تُقرأ إلا على أبيض علامة تتلاشى عند نصف زوّارك.
أيقونة SVG تستطيع فوق ذلك أن تحمل داخلها قاعدة prefers-color-scheme وتبدّل الألوان، وهو أمر أنيق يعمل في المتصفّحات التي تقبل أيقونات SVG. عامله تحسينًا على تصميم كان يعمل أصلًا، لا إصلاحًا.
لماذا لا تتحدّث أيقونتك
أيقونات المواقع تُخزَّن مؤقّتًا بشراسة وعلى حدة عن كل شيء آخر في الموقع، في مخزن لا يمسحه التحديث القسري العادي. هذا يسبّب كثيرًا من البحث عن عطل لا وجود له.
قبل أن تغيّر شيئًا، افتح رابط الأيقونة مباشرةً — /favicon.ico — وانظر ما الذي يعود. فإن كانت الأيقونة الجديدة هناك، فالملف سليم والتبويب يكذب. الطريقتان الموثوقتان لفرضها هما نافذة خاصّة، أو تقديم الأيقونة باسم ملف جديد.
صناعتها
المولّد يأخذ مصدرًا مربّعًا واحدًا وينتج المجموعة مع الوسوم المطابقة. ابدأ من شيء مربّع وبسيط — فإن كان مصدرك شعارًا عريضًا، فاقصصه إلى العنصر الواحد الذي يُقرأ صغيرًا قبل أن تبدأ، لا بعد رؤية النتيجة.
فعلها في المتصفّح له ميزة محدّدة هنا: المصدر غالبًا شعار الشركة، وهو ليس ملفًا يرتاح الناس لرفعه بلا تفكير إلى موقع وجدوه في بحث.
الخلاصة
ملف SVG، وملف ICO فيه 16 و32، وملف PNG بمقاس 180 لـiOS و512 لـAndroid. صمّم لـ16 بكسلًا أولًا ودع المقاسات الكبيرة تدبّر نفسها — لا العكس أبدًا. شكل واحد، وخطوط سميكة، وألوان متوسّطة الدرجة تصمد على شريط تبويبات داكن.
حين يبدو أنها لم تتغيّر، افحص الرابط قبل أن تغيّر شيئًا.