مولّد favicon: أنشئ أيقونة موقعك من صورة أو حرف

ما هو مولّد favicon؟

مولّد favicon أداة تحوّل صورة أو حرفًا واحدًا إلى أيقونة الموقع الظاهرة في لسان تبويب المتصفح وفي الاختصارات وشاشة الهاتف. تبدأ من صورة ترفعها، أو من نص قصير — حرف أو رمز تعبيري — ترسمه الأداة فوق خلفية بالشكل واللون اللذين تختارهما. والناتج ليس صورة واحدة بل مجموعة أحجام: من مقاس 16 بكسل الذي يظهر في التبويب، إلى 180 بكسل الذي تطلبه أجهزة آبل عند إضافة الموقع إلى الشاشة الرئيسية.

تعرض المعاينة الحيّة الأيقونة بأربعة مقاسات فعلية — 16 و32 و48 و180 بكسل — فترى بعينك ما ينجو من التفاصيل عند أصغر حجم، لا ما يبدو جميلًا في معاينة كبيرة مضلِّلة. وحقل اسم الموقع يغذّي ملف site.webmanifest الذي تطلبه متصفحات أندرويد عند إضافة الصفحة كتطبيق. لا حاجة لبرنامج تحرير صور ولا لمعرفة صيغة ICO؛ الأداة تكتب الملف الحقيقي بالبنية التي يتوقعها المتصفح.

كيفية الاستخدام

1. اختر نقطة البداية. ارفع صورة من جهازك، أو بدّل إلى وضع النص واكتب حرفًا أو رمزًا تعبيريًا واحدًا، واختر له لون الخلفية ولون النص والشكل من بين مربع أو مربع بحواف دائرية أو دائرة.
2. راجع المعاينة عند كل مقاس. انظر إلى الأيقونة عند 16 و32 و48 و180 بكسل قبل التنزيل، فما يبدو واضحًا في التصميم الكبير قد يتحوّل إلى بقعة لون عند حجم لسان التبويب الفعلي.
3. نزّل الملفات وأضف المقتطف. نزّل favicon.ico وملفات PNG بمقاساتها، ثم انسخ وسوم HTML أو محتوى site.webmanifest بزر النسخ وألصقها في رأس صفحتك.

ماذا يوجد فعلًا داخل ملف ‎.ico؟

ملف ICO ليس صيغة صورة بالمعنى المعتاد، بل أرشيف صغير. يبدأ بستة بايتات ترويسة تعلن نوع الملف وعدد الصور بداخله، يليها مدخل فهرس من ستة عشر بايتًا لكل صورة، ثم الصور نفسها متتابعة واحدة تلو الأخرى. ولهذا يستطيع ملف favicon واحد أن يحمل عدة مقاسات دفعة واحدة: أيقونة 16 بكسل التي تظهر في التبويب، وأيقونة 48 بكسل التي تظهر في الاختصار، هما رسمان منفصلان مخزّنان جنبًا إلى جنب، لا رسمًا واحدًا يُصغَّر عند الحاجة.

كل مدخل في الفهرس يحفظ عرض الصورة وارتفاعها في بايت واحد لكلٍّ منهما، وبايت واحد لا يتّسع لأكثر من 255. فكيف يُكتب مقاس 256 بكسل الذي تطلبه أيقونات آبل مثلًا؟ بحيلة بسيطة: يُكتب الرقم صفرًا، ويتفق الجميع على أن الصفر في هذا الحقل يعني 256. وليست هذه طرفة نادرة؛ إنها تظهر في ملفات ICO حقيقية منتشرة، ومنها الملف الذي يستعمله هذا الموقع نفسه.

وقد فحصنا ذلك الملف بأنفسنا: فتحنا favicon.ico الخاص بهذا الموقع فوجدنا فيه أربعة مداخل بمقاسات 16 و32 و48 و256 بكسل، وبعضها مخزَّن كـbitmap خام وبعضها كملف PNG كامل، متجاورة داخل الأرشيف نفسه. وهذا الخلط مسموح به منذ Windows Vista، الذي أضاف للصيغة إمكانية أن تكون حمولة أي مدخل ملف PNG جاهزًا بدل بيانات bitmap الخام التي كانت الصيغة الأصلية تتطلبها.

وهذا بالذات ما يجعل كتابة ICO داخل المتصفح ممكنة أصلًا: عنصر canvas ينتج PNG جاهزًا لكل مقاس، فلا يبقى على الأداة إلا أن تكتب ترويسة الملف وفهرسه ثم تُلحق كل PNG كما هو. ولأن المقاس المعلن في الفهرس والأبعاد الحقيقية للحمولة حقلان منفصلان لا تفرض الصيغة تطابقهما، ترسم الأداة كل حمولة بالضبط بالمقاس الذي يُكتب في مدخلها. وقد فُحص الناتج بقارئين مستقلين من macOS: الأمر file يتعرّف عليه كـMS Windows icon resource بالعدد الصحيح من الأيقونات ومقاساتها، وsips يتعرّف على الصيغة أيضًا. وأُجري إلى جانب ذلك 41 تحققًا آليًا، منها أن كل PNG مضمّن يعود مطابقًا بايتًا ببايت بعد كتابته وقراءته من جديد، وأن المداخل مرتّبة من الأصغر إلى الأكبر، وأن مدخل 256 ينجو سليمًا من رحلة الذهاب والإياب عبر حيلة بايت الصفر.

حدود لا تُخفى

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

هذه الأداة تكتب حمولات PNG داخل ملف ICO، وهذا يعمل في كل نظام حديث تقريبًا، لكن بعض البرامج القديمة جدًا التي سبقت Windows Vista قد تتوقع بيانات bitmap خام ولا تتعرّف على حمولة PNG. والأداة تصغّر ما تعطيها ولا تعيد تصميمه: فهي لا تستطيع أن تعرف كيف ينبغي أن يبدو شعارك عند حجم لسان التبويب.

الشفافية في الصورة الأصلية تُحفظ في الملفات الناتجة كما هي، لكن ما تفعله كل منصة بها بعد ذلك ليس بيد هذه الأداة ولا بيد الملف نفسه: بعض المتصفحات تقصّ الأيقونة بحواف دائرية، وبعض أنظمة الهاتف تركّبها فوق خلفية خاصة بها. وإعادة الترميز عبر canvas تمحو أي بيانات وصفية كانت مرفقة بالملف الأصلي، وهي المقايضة نفسها التي يقوم بها محوّل الصور.

لماذا هي مجانية؟

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

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