مولد الفافيكون — favicon.ico وأيقونات PNG
أداة في المتصفح تنشئ favicon.ico وأيقونات PNG بعدة مقاسات وملف manifest وشيفرة HTML
تعمل في متصفحك · لا يُرفع أي شيء
يظهر حرف أو حرفان بأوضح صورة. الحد الأقصى 4 أحرف.
يُكتب في الحقل "name" داخل site.webmanifest.
ما هذه الأداة؟
الفافيكون (favicon) هو الأيقونة الصغيرة التي تظهر في تبويبات المتصفح والإشارات المرجعية وعلى الشاشة الرئيسية للهاتف. تحوّل هذه الأداة صورة شعار أو بضعة أحرف أو رمزًا تعبيريًا واحدًا إلى كل المقاسات التي تحتاجها، وتعطيك وسوم HTML وملف بيان تطبيق الويب (manifest) المرافق لها. تُعالَج الصورة داخل متصفحك فقط.
طريقة الاستخدام
- اختر من طريقة الإنشاء: يتيح لك نص أو رمز تعبيري اختيار النص والخط والخلفية، بينما يستخدم صورة ملف شعارك.
- إن اخترت صورة فحدد طريقة جعلها مربعة (قص المنتصف أو إضافة هوامش) وما إذا كنت تريد خلفية شفافة. ثم اختر الشكل: مربع، أو مربع بزوايا مستديرة، أو دائرة.
- يمكنك ملء اسم الموقع والاسم المختصر ولون السمة، وهي تدخل في site.webmanifest وفي شيفرة HTML.
- راجع معاينة كل مقاس، ثم نزّل الملفات واحدًا تلو الآخر أو اضغط تنزيل الكل (ZIP).
- ارفع الملفات إلى جذر موقعك والصق الشيفرة الخاصة بقسم
<head>في HTML في صفحتك.
الملفات والقواعد
| الملف | المقاس | الاستخدام |
|---|---|---|
| favicon.ico | 16، 32، 48 | الأيقونة الافتراضية للمتصفح والبيئات القديمة |
| favicon-16x16.png، favicon-32x32.png | 16، 32 | تبويب المتصفح |
| favicon-48x48.png | 48 | اختصار سطح المكتب |
| apple-touch-icon.png | 180 | الشاشة الرئيسية في iOS (مربع معتم يمتد حتى الحواف) |
| android-chrome-192x192.png، android-chrome-512x512.png | 192، 512 | Android وPWA |
| android-chrome-maskable-512x512.png (اختياري) | 512 | أيقونة Android التكيفية: الرسم داخل المنطقة الآمنة في الوسط فوق خلفية تمتد حتى الحواف |
- الصورة الأم: يُرسم أولًا مربع بمقاس 512 بكسل، ومنه تُصنع كل المقاسات. وللوصول إلى المقاسات الصغيرة يُصغَّر الحجم إلى النصف خطوة بعد خطوة، فتبقى الحواف أنظف مما لو صُغّر دفعة واحدة.
- بنية ملف ICO: رأس من 6 بايتات، ثم مدخل دليل من 16 بايتًا لكل صورة، ثم بيانات PNG.
- ملاءمة النص: لا يتجاوز عرض النص نحو 78% من الأيقونة، ولا يتجاوز حجم الخط 72% منها.
- لون النص: يُختار تلقائيًا الأسود أو الأبيض بحسب الخلفية ليبقى مقروءًا، ويمكنك تغييره.
مثال على الشيفرة
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">الأسئلة الشائعة
هل تُرفع صورتي؟
لا. يجري تغيير المقاس وتجميع ملف ICO داخل متصفحك، ولا تُنزَّل النتائج إلا إلى جهازك.
ما الملفات التي تُنشأ؟
favicon-16x16.png وfavicon-32x32.png وfavicon-48x48.png وapple-touch-icon.png (180) وandroid-chrome-192x192.png وandroid-chrome-512x512.png، إضافة إلى favicon.ico يضم المقاسات 16 و32 و48. ويرافقها ملف site.webmanifest ووسوم link الخاصة بـ HTML، ويمكن تنزيل كل شيء في ملف ZIP واحد.
ماذا يوجد داخل favicon.ico؟
صور بمقاس 16 و32 و48 بكسل محفوظة كتدفقات PNG داخل حاوية ICO. تقرأ المتصفحات الحالية هذا التنسيق، وكذلك Windows منذ إصدار Vista. تكتب الأداة رأس ملف ICO ودليله بنفسها، وتتحقق اختباراتها من البايتات المميزة (00 00 01 00) ومن عدد المدخلات.
ماذا يحدث إن لم تكن الصورة مربعة؟
الفافيكون مربع، لذلك يُقص افتراضيًا أكبر مربع في وسط الصورة. وإن كان القص سيفسد شعارك فاختر «إبقاء الصورة كاملة مع هوامش» للحفاظ على النسب وترك المساحة الزائدة شفافة.
هل هناك ما يجب الانتباه إليه مع النص أو الرموز التعبيرية؟
عند 16 بكسل لا يبقى مقروءًا إلا حرف أو حرفان كبيران. تختلف الرموز التعبيرية من منصة إلى أخرى، لذا تستخدم الأيقونة الرسم الذي يعرضه جهازك. والخطوط مأخوذة من جهازك أيضًا، فقد يختلف شكل بعض الحروف قليلًا بين حاسوب وآخر.
أين أضع الملفات؟
ارفعها إلى جذر موقعك والصق وسوم link في قسم head من صفحة HTML. وإن وضعتها في مجلد آخر فغيّر المسارات في الشيفرة. تحتفظ المتصفحات بالفافيكون في ذاكرة التخزين المؤقت مدة طويلة، فامسحها إن لم يظهر التغيير فورًا.
