بدون رفع, 100% محلي، بدون حساب

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

حمّل شعارك أو أيقونتك وحمّل جميع أحجام الفافيكون القياسية كـ PNG. يتضمن أيقونة Apple Touch وأيقونات PWA. لا شيء يغادر جهازك.

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

منشئ Favicon يأخذ أي صورة تقدمها ويغير حجمها إلى أبعاد favicon القياسية باستخدام Canvas drawImage API: 16x16 و32x32 و48x48 و180x180 للأيقونة اللمسية من Apple و192x192 لـ Android Chrome و512x512 لـ PWA manifest. تُولَّد الأحجام الستة في متصفحك وتُنزَّل كملفات PNG منفردة. لا تغادر صورتك المصدر جهازك أبدًا.

مجموعة favicon الكاملة تغطي النطاق الكامل لأيقونات تبويب المتصفح والإشارات المرجعية واختصارات الشاشة الرئيسية وشاشات بداية تطبيق PWA. استخدام صورة مصدر عالية الدقة لا تقل عن 512x512 بيكسل يمنح خوارزمية تقليص الحجم أكبر قدر من التفاصيل للعمل بها. وسوم HTML التي تحتاجها للإشارة إلى كل ملف منشأ تُعرض في قصاصة يمكن نسخها مباشرةً في عنصر head الخاص بصفحتك.

كتبه Bastien Sulyan

كيفية استخدام مولّد الفافيكون خطوة بخطوة

  1. أسقط صورتك المصدر في منطقة الرفع. استخدم صورةً مربعة بحجم 512 بكسل أو أكبر للحصول على أفضل نتائج.
  2. اعرض الأحجام الستة المُولَّدة في لوحة النتائج.
  3. نزّل ملفات PNG الستة وملف favicon.ico من لوحة النتائج.
  4. انسخ قصاصة HTML التي تُظهر وسوم link لجميع الأحجام.
  5. ضع ملفات PNG في جذر موقعك والصق وسوم link في head صفحتك.

حالات الاستخدام الشائعة

  • مطور يُعدّ موقعًا جديدًا ويحتاج إلى جميع أحجام favicon المُولَّدة من شعار العلامة التجارية دون اشتراك في أداة تصميم.
  • مؤلف تطبيق PWA يُنشئ أيقوناتي 192x192 و512x512 المطلوبتين في web app manifest لتثبيت الشاشة الرئيسية.
  • مدوّن يُجدّد هوية موقعه ويستبدل favicon الافتراضية بأيقونة مخصصة مبنية من شعاره.
  • مستقل يُنتج مجموعة favicon الكاملة لمشروع عميل بسرعة دون الانتظار لتثبيت برنامج تصميم غير متصل.

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

ما تنسيقات الصور التي يمكنني استخدامها كمصدر؟

أي تنسيق يمكن للمتصفح فك ترميزه يعمل كإدخال: JPEG وPNG وWebP وGIF وSVG. لمصادر SVG، يُحوِّل المتصفح المتجه إلى Canvas قبل تغيير الحجم، لذا يكون إخراج PNG نقطيًا بغض النظر.

لماذا تكون favicon ضبابيةً في تبويب المتصفح؟

حجما 16x16 و32x32 صغيران جدًا. إذا كانت الصورة المصدر تحتوي على تفاصيل دقيقة أو خطوط رفيعة، فلن تنجو من التقليص. التصميم البسيط الجريء بأشكال واضحة يعمل أفضل بكثير عند الأحجام الصغيرة مقارنةً بالرسوم التوضيحية المعقدة.

هل تُولّد الأداة ملفات ICO؟

نعم. إلى جانب ملفات PNG الستة، تُجمِّع الأداة ملف favicon.ico يحتوي على الأحجام 16x16 و32x32 و48x48 في ملف واحد، وهو ما تبحث عنه متصفحات Windows القديمة وبعض برامج الزحف عند جذر الموقع. المتصفحات الحديثة تكتفي بروابط PNG، لذا نشر الملفين معًا لا يكلّف شيئًا ويترك لكل عميل حرية الاختيار.

هل تُعالَج الصورة المصدر على خادم؟

لا. نداءات Canvas drawImage التي تُنتج كل حجم تعمل في تبويب متصفحك. تُقرأ الصورة المصدر من قرصك المحلي وتُنشأ إخراجات PNG الستة في الذاكرة وتُعرض للتنزيل. لا تمر بيانات الملف عبر خادم.

أي حجم يجب استخدامه لأيقونة Apple touch icon؟

يستخدم iOS وiPadOS ملف PNG بحجم 180x180 بكسل المشار إليه بوسم link من النوع apple-touch-icon. يُستخدم هذا الحجم عندما يُضيف مستخدم موقعك إلى شاشته الرئيسية على جهاز Apple. تُولّد الأداة هذا الملف جنبًا إلى جنب مع الأحجام الأخرى.

هل يمكنني استخدام صورة مستطيلة كمصدر؟

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

أدوات ذات صلة

أبقِ كل شيء محليًا, استكشف الأدوات التكميلية.

جميع أدوات الصور