مولّد Favicon: ملفات ICO وأيقونات PNG وManifest

favicon هو الأيقونة الصغيرة التي تظهر في علامات تبويب المتصفح والإشارات المرجعية وقوائم السجل ونتائج البحث بجانب اسم موقعك. على الهواتف، تظهر نسخ أكبر على الشاشة الرئيسية عندما يحفظ أحدهم موقعك. الأيقونة الواضحة تجعل موقعك سهل العثور عليه بين عشرات علامات التبويب المفتوحة وتبدو أكثر احترافية.

تحتاج الأماكن المختلفة إلى أحجام وصيغ مختلفة. لا تزال المتصفحات تبحث عن favicon.ico، وتستخدم أجهزة Apple ملف PNG بحجم 180 بكسل، ويقرأ Android وتطبيقات الويب القابلة للتثبيت الأيقونات من web manifest، وتفضّل محركات البحث أيقونات لا تقل عن 48 بكسل.

الأحجام التي تحتاجها

شرح أحجام favicon في سطر لكل منها: 16 و32 بكسل لعلامات تبويب المتصفح، و48 بكسل لنظام Windows ونتائج البحث، و180 بكسل لأيقونات Apple touch، و192 و512 بكسل لـ Android وملفات manifest لتطبيقات الويب. ينشئ هذا المولّد كلها، إضافة إلى نسخ 64 و96 و128 و256 و384 بكسل لاستخدامات أخرى.

أضف شعارًا، ويُفضّل أن يكون مربعًا ولا يقل عن 512 × 512 بكسل. يعطي ملف PNG بخلفية شفافة أو SVG أحدّ النتائج. اختر خلفية شفافة أو مصمتة، وأضف حشوًا إذا لامس الرسم الحواف، واجعل الزوايا مستديرة إذا أردت أيقونة بأسلوب التطبيقات. تعرض المعاينات الأيقونة بأحجام 16 و32 و48 و180 بكسل على خلفيات فاتحة وداكنة، لتحكم على مظهرها في علامات تبويب حقيقية.

أدخل اسم تطبيقك ولون السمة لملف manifest، ثم اضغط "تنزيل حزمة favicon". يمكنك أيضًا تنزيل favicon.ico فقط أو ملف PNG بحجم 512 بكسل.

البدء من PNG

لإنشاء favicon من رسم PNG، ابدأ بأكبر نسخة لديك. تصغير صورة كبيرة ينتج أيقونات صغيرة حادة، بينما تكبير صورة صغيرة ينتج ضبابية. إذا كان شعارك عريضًا، ففكّر في استخدام رمزه أو حرفه الأول فقط، لأن النص يصبح غير مقروء عند 16 بكسل.

favicon.ico

يُنشأ ملف favicon.ico بتحويل PNG إلى ICO يخزّن صورًا بأحجام 16 و32 و48 بكسل داخل ملف واحد. تقرأ المتصفحات الحديثة وWindows الأيقونات المضغوطة بصيغة PNG، ما يبقي الملف صغيرًا والحواف نظيفة.

أجهزة Apple

حجم Apple touch icon هو 180 × 180 بكسل. يملأ iOS المناطق الشفافة بالأسود، لذا عندما تكون خلفيتك شفافة، يعطي المولّد هذه الأيقونة تلقائيًا خلفية مصمتة بلون السمة.

Android وتطبيقات الويب

أيقونات web manifest في site.webmanifest هي ملفات PNG بحجم 192 و512 بكسل، بما في ذلك نسخة maskable لنظام Android الذي يقص الأيقونات إلى دوائر أو مربعات مستديرة. أبقِ الرسم المهم داخل الـ 80% المركزية من الأيقونة كي لا يُقص شيء.

فك ضغط الحزمة وارفع الملفات إلى المجلد الجذر لموقعك، في مكان صفحتك الرئيسية نفسه. ثم انسخ مقتطف HTML إلى قسم head في كل صفحة، أو إلى قالب موقعك. يربط المقتطف ملف ICO وملفات PNG بحجم 16 و32 بكسل وأيقونة Apple وملف manifest.

غالبًا ما تحتوي أدوات بناء المواقع وأنظمة المحتوى على إعداد لأيقونة الموقع بدلًا من ذلك. في هذه الحالة، ارفع ملف PNG بحجم 512 بكسل هناك، وستنشئ المنصة الأحجام الأخرى بنفسها.

حل المشكلات

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

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

الاتساق مهم أيضًا. استخدم ألوان علامتك التجارية نفسها، التي يمكنك أخذ عينة منها بمنتقي الألوان لدينا، وأبقِ الأيقونة قابلة للتعرف عبر الأحجام.

تُعالج الصور في متصفحك ولا تُرفع أبدًا. تُنظَّف ملفات SVG من النصوص البرمجية والمراجع الخارجية قبل العرض. مدخلات PNG وJPG وWebP وGIF وSVG مدعومة. الأداة مجانية وبلا حدود ولا تستهلك أرصدة EnhancerPro.

الخطوات التالية

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

علامات تبويب المتصفح

تعرض متصفحات الحاسوب عادةً أيقونة 16 أو 32 بكسل في علامات التبويب، ونسخة 32 بكسل على الشاشات عالية الدقة. يستخدم Chrome وEdge أيضًا أيقونات PNG الأكبر للاختصارات وصفحة علامة التبويب الجديدة. لأن هذه الأحجام صغيرة جدًا، افحص معاينة 16 بكسل بعناية؛ إذا بدت الأيقونة معكّرة، فبسّط الرسم أو زد الحشو قليلًا.

نتائج البحث

تعرض محركات البحث favicon بجانب موقعك في النتائج على الهاتف والحاسوب. تفضّل أيقونة مربعة بحجم من مضاعفات 48 بكسل يمكن لزواحفها الوصول إليها. ربط الأيقونات في head صفحتك الرئيسية، كما في المقتطف المولَّد، هو الطريقة القياسية لتسهيل العثور عليها.

الشاشات الرئيسية

عندما يضيف الناس موقعك إلى الشاشة الرئيسية لهواتفهم، تستخدم أجهزة iPhone أيقونة Apple touch وتستخدم هواتف Android الأيقونات من manifest. كلاهما يبدو أفضل بخلفية مصمتة وقليل من الحشو، كي لا يلامس الرمز الزوايا المستديرة التي يضيفها النظام.

الوضع الداكن

يستخدم كثيرون سمات متصفح داكنة. الشعار الأسود على خلفية شفافة يختفي هناك. تُظهر المعاينة الداكنة في الأداة ذلك فورًا. لون خلفية مصمت أو إطار فاتح أو نسخة ثنائية اللون من الشعار تبقي الأيقونة ظاهرة في كل مكان.

تحديث أيقونة موجودة

عند استبدال favicon، احتفظ بأسماء الملفات نفسها لتبقى الروابط الحالية عاملة. تخزّن المتصفحات الأيقونات مؤقتًا بقوة، لذا قد تستغرق الجديدة وقتًا لتظهر للزوار العائدين. إضافة استعلام إصدار، مثل favicon.ico?v=2، إلى الروابط في HTML يجبر المتصفحات على جلب الملفات الجديدة.

قائمة فحص قبل النشر

قبل النشر، افحص أربعة أمور. يُفتح ملف favicon.ico في المتصفح على your-domain/favicon.ico. مقتطف HTML موجود في head صفحتك الرئيسية. أيقونة Apple لها خلفية مصمتة وتبدو جيدة عند إضافة الموقع إلى الشاشة الرئيسية لجهاز iPhone. اسم manifest ولون السمة يطابقان علامتك التجارية. مع ذلك، ستظهر أيقونتك باتساق في علامات التبويب والإشارات المرجعية ونتائج البحث والشاشات الرئيسية، وسيتعرّف الزوار على موقعك من النظرة الأولى.

الاحتفاظ بالملفات المصدرية

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