مولّد الفافيكون

ما مولّد الفافيكون؟#

الفافيكون هو الأيقونة الصغيرة التي تظهر في لسان المتصفّح، وفي قائمة الإشارات المرجعية، وفي معاينة «أضِف إلى الشاشة الرئيسية» على الهاتف، وفي بلاطة ويندوز. المُحرَّج أنّ «الفافيكون» ليس ملفًّا واحدًا — فالمنصّات المختلفة تتوقّع أحجامًا مختلفة وأسماء ملفات مختلفة. متصفّح سطح المكتب يريد favicon.ico الكلاسيكيّ، وiOS يريد apple-touch-icon.png بدقة 180×180، وتطبيق ويب PWA قابل للتثبيت يريد 192 و512 داخل site.webmanifest، كما تلتقط المتصفّحات الحديثة ملفات PNG مستقلّة. توليد كلّ تلك يدويًّا، بالإضافة إلى وسوم <head> التي تربطها، هو بالضبط نوع المهمّة المُعقَّدة التي لا ينبغي أن تُنجَز مرّتين يدويًّا.

تُنتج هذه الصفحة المجموعة الكاملة من مصدر واحد: إمّا صورة تُوفّرها، أو حرف على خلفية مصمتة (مفيد لعلامة «الحرف الأول» السريعة). اختر الأحجام التي تحتاجها، فتُحزَّم كلّ شيء في ملفّ .zip واحد — ICO متعدّد الصور، وملفات PNG مستقلّة، وwebmanifest، ومقتطف HTML يعدّد وسوم <link> و<meta> بالضبط لتُلصَق. كلّ التحويل إلى صورة نقطية يجري في متصفّحك.

كيف تستخدمها#

1. اختر المصدر:
   • صورة — اسحب (أو اختر) أيّ صورة مربّعة تقريبًا. تُرسَم في كلّ حجم مُختار.
   • حرف — اكتب محرفًا أو اثنين (افتراضيّ A)، واختر لون الخلفية (أزرق سماويّ افتراضيًّا) ولون النصّ (أبيض افتراضيًّا). يُوسَط الحرف على الخلفية في كلّ حجم.
2. علِّم الأحجام التي تريدها من 16, 32, 48, 180, 192, 512. الستّة كلّها مُفعَّلة افتراضيًّا. يعيش 48 حصرًا داخل favicon.ico (بدون PNG مستقلّ)، فيُحزَّم تلقائيًّا عندما يكون 16 و32 مُفعَّلَين.
3. راقب لوحة معاينة — تُعرَض أكبر حجم مُختار على رقعة شفافية لترى أيّ مناطق شفافة.
4. انقر تنزيل .zip. تحتوي الأرشيف، لاختيار كلّ الأحجام الافتراضيّ:
   • favicon.ico — ICO متعدّد الصور يحزم 16 و32 و48 كـ PNG مُضمَّن (صيغة Vista+ التي يقبله كلّ متصفّح حديث).
   • favicon-16x16.png، favicon-32x32.png — ملفات PNG مستقلّة.
   • apple-touch-icon.png — أيقونة iOS بدقة 180×180.
   • android-chrome-192x192.png، android-chrome-512x512.png — أيقونات manifest لـ PWA.
   • site.webmanifest — يشير إلى أيقونات 192/512، مع ألوان السمة والخلفية.
   • html-snippet.html — وسوم <link rel="icon"> و<link rel="apple-touch-icon"> و<link rel="manifest"> و<meta name="theme-color">.
5. فُكّ الضغط في جذر موقعك، وألصق المقتطف في <head>، فتُحَلّ الأيقونات من /.

أبرز المزايا#

• مجموعة كاملة بأسماء تقليديّة في zip واحد. أسماء الملفات (favicon.ico، apple-touch-icon.png، android-chrome-512x512.png، site.webmanifest) تطابق ما تبحث عنه المتصفّحات وأدوات البناء في جذر الموقع افتراضيًّا.
• مُرمِّز ICO مؤلَّف ذاتيًّا. ICO صحيحيّ متعدّد الصور بصيغة Vista+ (ICONDIR + جدول ICONDIRENTRY + حمولات PNG مُضمَّنة)، مكتوب من الصفر — لا كعب 32×32 أحاديّ الصورة.
• وضع الحرف لعلامات فوريّة. محرفان، و منتقا ألوان، وانتهى — مفيد للأدوات الداخلية والعروض التوضيحية التي تحتاج أيقونة يمكن تمييزها في ثلاثين ثانية.
• الملفات التي تحتاجها فعلًا فقط. ألغِ تفعيل حجم فلا يُنتَج لا PNG ولا مدخل manifest له؛ ويُعاد توليد مقتطف HTML ليطابق.
• مقتطف رأس جاهز للّصق. أسطر <link> و<meta> بالضبط، محصورة بالأصول الموجودة فقط، فلا تُلصق إشارات إلى ملفات لم تُولِّدها.
• 100% محليّ. تُحال الصورة المصدرية أو الحرف إلى نقطيّ في المتصفّح؛ ويُجمَّع zip في المتصفّح. لا رفع.

مثال عملي#

تريد فافيكون لمشروع جانبيّ اسمه «Glide». اختر المصدر: حرف، واكتب G، واضبط الخلفية على #0ea5e9 والنصّ على #ffffff، واترك الستّة كلّها مُفعَّلة، وانقر تنزيل .zip. يُعطي فكّ الضغط:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

يحتوي html-snippet.html على:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

أفلت تلك الملفات الثمانية في جذر موقعك، وألصق الأسطر الستّة في <head>، فكلّ منصّة — لسان المتصفّح، الشاشة الرئيسية لـ iOS، PWA على Android — تُحَلّ الأيقونة الصحيحة.

الأسئلة الشائعة#

لماذا لا توجد PNG مستقلّة بدقة 48×48؟#

يُستهلَك 48 حصرًا داخل favicon.ico (تقرأ بعض الأدوات القديمة مدخل 48 من ICO). إنتاج favicon-48x48.png مستقلّ سيكون مجرّد وزن ميت لا يجلبه أيّ متصفّح، فتُحزِّم الأداة 48 داخل ICO وتتخطّى الملف المستقلّ.

هل أحتاج فعلًا كلّ الأحجام الستّة؟#

لتغطية كاملة، نعم. إن اهتممت بلسان المتصفّح فقط لا iOS أو PWA، ألغِ 180 و192 و512 فتحصل على ICO فقط بالإضافة إلى PNG بدقة 16/32 — حزمة أصغر بكثير. عندئذٍ يحتوي المقتطف على روابط icon فقط، بلا أسطر manifest أو apple-touch.

يُوصَف ICO بـ«PNG مُضمَّن» — هل هذا صالح؟#

نعم. منذ ويندوز فيستا، يستطيع ICO تضمين حمولات PNG (بدلًا من صيغة BMP القديمة)، وكلّ متصفّح حديث يقرأ هذا الشكل. يتجنّب ذلك مُرمِّز BMP منفصلًا ويُنتج ملفات أصغر للحجم 48.

حرفي يبدو خارج الوسط في حجم ما.#

يُوسَط الحرف على اللوحة في كلّ حجم بخطّ ثابت؛ الحروف المربّعة جدًّا (مثل M) والحروف ذات الأذواء أو الذيول قد تبدو أعلى أو أخفض قليلًا بسبب مقاييس الخطّ. إن كان الوسط المثاليّ بالبكسل مهمًّا، أعرض العلامة في محرّر صور واستخدم المصدر: صورة بدلًا من ذلك.