كيف تصنع فافيكون يظل مقروءاً عند ستة عشر بكسلاً

الجواب القصير

افتح الصورة إلى ICO، وأفلِت فيها صورةً مربّعة لا تقلّ عن 256 بكسلاً، واترك الإعداد الجاهز على فافيكون موقع ويب، ونزّل favicon.ico. وضعه في جذر موقعك، بحيث يجيب عند https://yoursite.com/favicon.ico. فذلك العنوان يطلبه كلُّ متصفح سواءٌ ذكرته صفحاتُك أم لم تذكره، فليس ثمّة شيءٌ آخر عليك فعله بالضرورة.

وكلُّ ما دون ذلك هو الجزءُ الذي يفرق بين أيقونة موجودة تقنياً وأيقونة مقروءة: أيُّ مقاسات تدخل، وماذا تطلب هواتفُ iPhone وأجهزةُ Android بدلاً منها، وماذا تفعل حين لا ينجو شعارُك من أن يكون عرضه ستة عشر بكسلاً.

لماذا هو مجموعةُ مقاسات لا صورةٌ واحدة

ملفُّ ico. حاوية. وبداخله عدةُ صور كاملة للشيء نفسه بمقاسات مختلفة، وما يقرأ الملفَّ يختار الأقربَ إلى المقاس الذي يحتاجه.

وذلك يبدو تكراراً وليس كذلك. فالمتصفحُ الذي يرسم أيقونتك عند ستة عشر بكسلاً أمامه خياران: أن يقرأ نسخةً بستة عشر بكسلاً رسمتها أنت، أو أن يصغّر نسخةً أكبر في الحال. والثاني أسوأ، وعلى نحو مرئيّ — فالتصغيرُ الآلي لشعار مفصَّل ينتج عصيدة، بينما النسخةُ ذاتُ الستة عشر بكسلاً التي نظرت إليها شيءٌ أُتيحت لك فرصةُ تبسيطه. والسببُ كلُّه في أن الصيغة تحمل عدة مقاسات هو أن تعطيك تلك الفرصة.

وثلاثةُ مقاسات هي العرفُ لموقع ويب، ولكلٍّ سبب:

• ⁦16×16⁩ — لسانُ المتصفح، وشريطُ العناوين، وقائمةُ العلامات المرجعية. وهذا هو الذي يراه الناس. فإن لم تُصِب إلا واحداً، فأصِب هذا.
• ⁦32×32⁩ — شريطُ العلامات المرجعية، واختصارُ سطح مكتب Windows إلى موقعك، ومعظمُ المتصفحات على شاشة عالية الكثافة، وهي ترسم أيقونة اللسان من 32 وتصغّرها.
• ⁦48×48⁩ — ما تقرأ به Google أيقونةَ موقع لنتائج البحث، وعرضُ الأيقونات المتوسطة في Windows.

وكلُّ ما هو أكبر مكانُه ملفُّ PNG بجانب ico. لا بداخله، لأسباب تأتي تحت ملفات الهواتف أدناه.

مشكلةُ الستة عشر بكسلاً

وهذا هو الجزءُ الذي لا يحذّرك منه أحد. فستة عشر بكسلاً نحوُ أربعة مليمترات على شاشة عادية: شبكةٌ من 256 نقطة في المجموع، أقلُّ من حروف هذه الجملة. ولا يكاد ينجو من التصغير إليها شيءٌ صُمِّم ليعمل على لافتة أو بطاقة عمل أو ترويسة موقع.

وما يختفي، بالترتيب:

• النصّ. فالكلمةُ المرسومة مصغَّرةً في مربّع ارتفاعُها نحو ثلاثة بكسلات. وهي لا تصير نصّاً صغيراً، بل تصير شريطاً رمادياً. ولهذا تستعمل كلُّ شركة لها رمزٌ إلى جانب اسمها الرمزَ وحده فافيكوناً تقريباً، ولهذا تستعمل التي لا رمز لها حرفاً واحداً.
• الخطوطُ الرفيعة. فالحدُّ بعرض بكسل واحد على شعار بـ 512 بكسلاً هو جزءٌ من اثنين وثلاثين من بكسل عند ستة عشر. ويُرسَم ضبابةً رمادية خافتة على الحافّة، أو يختفي.
• التدرّجاتُ والظلال. فليس ثمّة متّسعٌ لانتقال. والظلُّ الساقط الناعم يصير هُدباً متّسخاً.
• التفصيلُ داخل التفصيل. فأيقونةُ مستند عليه كتابة تصير مستطيلاً فيه لطخة.

والعلاجُ ليس إعداداً، بل رسمٌ آخر: علامةٌ مبسَّطة بشكل أو شكلين، وتباينٌ عالٍ، ولا نصَّ فيها أكثر من محرف واحد. ارسم تلك النسخة عند 32 أو 48 بكسلاً عن قصد، واستعملها مصدراً.

وما تستطيعه الأداةُ هو أن تريك المشكلة قبل أن تنشرها. فالمعاينةُ في الصورة إلى ICO ترسم كل مقاس بمقاسه الحقيقي على الشاشة، وهي الطريقةُ الوحيدة للحكم على هذا — فأيقونةٌ بستة عشر بكسلاً معروضةً عند أربعة وستين تبدو حسنةً ولا تقول لك شيئاً.

شعارُك ليس مربّعاً. أتحشو أم تقتصّ؟

الأيقونةُ مربّعةٌ دائماً، ومعظمُ الشعارات ليست كذلك، فلا بدّ أن يحدث شيء. وثمّة ثلاثةُ أجوبة وهي ليست متساويةً في الجودة.

الحشو يحفظ الصورة كلها ويضع فراغاً فوقها وتحتها. وهو الافتراضُ الآمن والاختيارُ الخاطئ لكلمة مرسومة عريضة: فإدخالُ شيء عرضه ثلاثةُ أضعاف ارتفاعه في مربّع يتركه يشغل ثلثَ الارتفاع، وذلك عند ستة عشر بكسلاً خمسةُ بكسلات من الشعار وأحدَ عشر من لا شيء.

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

والمطُّ يهرس الصورة لتوافق. ولا يكاد يوجد موقفٌ يكون فيه هذا صواباً، وهو معروضٌ أساساً كي لا تكون الأداةُ تفعله بصمت.

والجوابُ العامّ لشعار عريض: لا تحوّل الشعار. حوّل الجزءَ منه الذي ينجح وحده.

شفافٌ أم خلفيةٌ مصمتة؟

الشفافُ صوابٌ عادةً لموقع ويب. فألسنةُ المتصفحات رمادية أو بيضاء أو شبهُ سوداء بحسب المتصفح والسمة، والأيقونةُ الشفافة تقبع عليها كلها. والأيقونةُ المطليّةُ بخلفية بيضاء مستطيلٌ أبيض في شريط ألسنة داكن.

واستثناءان جديران بالمعرفة:

• الشعارُ الداكنُ ولا شيء غير ذلك يختفي في الوضع الداكن. فإن كانت علامتُك سوداءَ على أبيض بطبعها، فأعطها خلفيةً ملوَّنة لا شفافة، أو خطّاً خارجياً فاتحاً.
• وأيقونةُ اللمس في Apple يجب أن تكون معتمة. فـ iOS يرسمها على مربّعه المستدير ويعرض الشفافية سوداء. وأيُّ أداة تنتج ذلك الملف ينبغي أن تسطّحه لك؛ والتي هنا تفعل، على الأبيض افتراضياً.

الملفاتُ التي يحتاجها موقعٌ وليست ملفَّ ico.

favicon.ico يغطّي المتصفحات وWindows. وهو لا يغطّي الهواتف، وهنا تتوقّف معظمُ مجموعات الأيقونات المصنوعة منزلياً قبل الأوان. فثلاثُ منصّات أخرى تطلب ملفاتها هي، بأسمائها هي، ولا واحدةٌ منها تنظر داخل ملف ico.:

• iOS يقرأ apple-touch-icon.png عند ⁦180×180⁩ حين يضيف أحدهم موقعك إلى شاشته الرئيسية. وبدونه، يستعمل iOS لقطةَ شاشة للصفحة، وتبدو غلطة.
• وAndroid وكلُّ مطالبة تثبيت تقرأ بيانَ تطبيق ويب — site.webmanifest — يشير إلى ملفَّي PNG بـ 192 و512 بكسلاً. والـ 512 هو أيضاً ما يعرضه تطبيقُ الويب على شاشة البدء.
• ومربّعُ قائمة ابدأ في Windows يقرأ browserconfig.xml، الذي يشير إلى ملف PNG بـ ⁦150×150⁩. وهو أقلُّ الثلاثة أهميةً، وأربعةُ أسطر من XML.

وثمّة واحدةٌ أخرى يسهل الخطأ فيها: فمشغّلاتُ Android تقتصّ الأيقونة المتكيّفة إلى أيّ شكل يحبّه الهاتف — دائرة، أو مربّعٌ دائري، أو مربّعٌ مستدير — ولا يُضمَن نجاةُ أكثر من 80% الوسطى من الصورة. فالأيقونةُ المرسومة من حافة إلى حافة تفقد زواياها. وتلك هي الأيقونةُ القابلة للقنع: الصورةُ نفسها مرسومةً صغيرةً عن قصد داخل المربّع، معلَنةً على حدة في البيان.

وتأشيرُ مجموعة موقع الويب في الصورة إلى ICO ينتج هذه كلها والبيانَ وكتلةَ HTML التي تشير إليها. وشيءٌ تتركه تلك الكتلةُ عن قصد هو <link> لـ favicon.ico: فالمتصفحاتُ تطلب ذلك العنوان بنفسها، وتسميتُه كذلك تجعل الملفَّ نفسه يُجلَب مرتين.

أيقونةُ تطبيق Windows مجموعةٌ أخرى

إن كانت الأيقونةُ لبرنامج لا لموقع، تغيّرت المقاسات. فما يحويه ملفُّ app.ico الافتراضي في Visual Studio نفسه هو 16 و32 و48 و256 — مقاساتُ الغلاف الثلاثة إضافةً إلى الكبير الذي ترسم منه قائمةُ ابدأ وعرضُ Explorer الكبير جداً.

وعلى شاشة عالية الكثافة يطلب Windows كذلك 20 و24 و40 و64 و96، ويعيد أخذ عيّناتها من أقرب مقاس عنده حين تكون ناقصة. وهل يهمّ ذلك يتوقّف على أيقونتك: فالشكلُ المسطّح ينجو من إعادة أخذ العيّنات، والمفصَّلُ لا ينجو. وإضافتُها تضاعف الملف تقريباً، وذلك في تطبيق لا شيء البتة — فالحسابُ مختلفٌ تماماً عن الفافيكون، حيث يُجلَب الملفُّ من كل زائر.

وشيءٌ آخر عن الحجم: مدخلُ الـ 256 هو حيث تقع البايتات. فمخزَّناً دون ضغط هو 264 كيلوبايت وحده؛ ومخزَّناً ملفَّ PNG داخل الأيقونة هو عادةً دون 30. ومداخلُ PNG مقروءةٌ منذ Windows Vista، فالسببُ الوحيد لتجنّبها برمجيةٌ أقدم من ذلك حقاً، أو مثبِّتٌ أو أداةٌ مضمَّنة تحلّل الأيقونات بنفسها.

جهازُ Mac يقرأ ملفاً آخر تماماً

إن كانت الأيقونةُ لتطبيق Mac لا لتطبيق Windows، فلا شيء ممّا سبق ينطبق: فـ macOS لا يقرأ ico. أصلاً. بل يقرأ icns.، وهي الفكرةُ نفسها في غلاف آخر — عدةُ مقاسات في حاوية واحدة — مع ثلاثة فروق جديرة بالمعرفة.

• المقاساتُ ثابتة. فـ Apple تنشر عشرة مواضع وليس ثمّة ما يُختار: 16 و32 و64 و128 و256 و512 و1024 بكسلاً، مع ظهور 32 و256 و512 مرتين لأن كلاً منها مقاسٌ بذاته ونسخةُ Retina للمقاس الذي تحته معاً.
• وهي تصل إلى 1024. وملفُّ ico. يقف عند 256، ولهذا يكون ملفُّ أيقونة Mac عدةَ مئات من الكيلوبايتات والفافيكونُ خمسةَ عشر. وذلك في تطبيق يُشحَن مرةً لا شيء؛ فالفافيكونُ وحده هو الذي يُجلَب من كل زائر.
• و1024 بكسلاً هي ما على رسمك أن ينجو منه. فالمشكلتان طرفان متقابلان للصورة نفسها: على الفافيكون أن ينجح وهو ضئيل، وعلى أيقونة Mac أن تصمد وهي ضخمة. والشعارُ المصدَّرُ عند 512 والمنفوخُ إلى 1024 يبدو طريّاً على شاشة Retina، ومتجرُ التطبيقات لن يقبله.

ولاستعمال واحد: حزمةُ التطبيق تحفظه عند YourApp.app/Contents/Resources/ وتسمّيه في Info.plist. ولمجلَّد أو صورة قرص، اختر ملفَّ icns. في Finder، واضغط Command-C، ثم Get Info على ما تريد تغييره، وانقر الأيقونة الصغيرة في أعلى اليسار واضغط Command-V.

وتأشيرُ أيقونة macOS في الصورة إلى ICO يكتب واحدة، بملف Windows بجانبها أو بدونه. وكلُّ ما يُشحَن على المنصّتين يريد الاثنين، وكلاهما مرسومٌ من الصورة نفسها في المرور نفسه.

التحقّقُ من أنه نجح

المتصفحاتُ تخزّن الفافيكونات مؤقتاً بعناد أشدَّ من كل شيء تقريباً، فـ «رفعته ولم يتغيّر شيء» تخزينٌ مؤقت عادةً لا غلطة. وشيئان تجرّبهما قبل أن تعود إلى تحرير الملفات:

• افتح https://yoursite.com/favicon.ico مباشرةً. فإن نُزِّل الملف، فهو هناك وأنت تنظر إلى تخزين مؤقت. وإن حصلت على 404، فهو ليس في الجذر.
• حمّل الموقع في نافذة خاصة، ولها عادةً تخزينُها المؤقت الخاص للأيقونات.

وعلى Windows، يمكن فحصُ ملف ico. بوضعه في مجلَّد وتبديل Explorer بين مقاسات عرضه: فالصغيرُ والمتوسطُ والكبيرُ والكبيرُ جداً ترسم مداخل مختلفة من الملف نفسه، فتستطيع رؤية كل واحد كما سيراه النظام.

وعلى جهاز Mac، يُفتَح ملفُّ icns. في Preview، وهو يسرد كل موضع على الجانب — والحيلةُ نفسها تنجح في Finder: أفلِته في مجلَّد واسحب مزلاج المقاس في خيارات العرض لتراه يتبدّل بين الصور التي بداخله.

لا شيء من هذا يحتاج رفعاً

قياسُ صورة شيءٌ يفعله كلُّ متصفح منذ سنين، وملفُّ ico. ترويسةٌ من ستة بايتات، وستةَ عشرَ بايتاً لكل صورة، ثم الصور. فليس في صنع واحد خطوةٌ تقتضي خادماً، والأداةُ هنا لا تستعمل واحداً: Content-Security-Policy الخاصةُ بالصفحة تسمّي كل عنوان يحقّ لها الاتصال به، ولا واحدٌ منها يخصّ هذا الموقع.

وذلك جديرٌ بالاهتمام هنا أكثر من المعتاد. فالشعارُ المناوَلُ إلى مولّد فافيكون مجاني كثيراً ما يكون علامةً تجارية لم تُطلَق بعد — فالأيقونةُ من أوائل ما يُصنَع ومن أواخر ما يُعلَن. حمّل الصفحة، واقطع الاتصال بالإنترنت، واصنع واحداً رغم ذلك إن كنت تفضّل أن تتحقّق على أن يُقال لك. هل رفع الملفات إلى المحوِّلات على الإنترنت آمن؟ يعرض ثلاثة فحوص أخرى تستطيع إجراءها على أي أداة.