Stax

مولد Favicon

توليد favicons بجميع الأحجام من نص أو صورة.

60%

ما هو مولّد favicon؟

أداة تحويل صورة واحدة إلى حزمة favicon كاملة - 16x16، 32x32، 180x180 (Apple)، 192x192 (Android)، favicon.ico متعدد. أداة احترافية مهمة لكل موقع - بدون favicon، يبدو الموقع غير مكتمل.

ملفات الإخراج

  1. favicon.ico - الكلاسيكي للمتصفحات
  2. favicon-16x16.png - تبويب صغير
  3. favicon-32x32.png - تبويب أكبر
  4. apple-touch-icon.png - 180x180
  5. android-chrome-192x192.png
  6. android-chrome-512x512.png

نصائح التصميم

  • بسيط جداً - لا تفاصيل دقيقة
  • حرف واحد أو شعار بسيط
  • خلفية متباينة (داكن/فاتح)
  • اختبر في 16x16 - إذا غامض، بسّط
  • تجنب نص (مستحيل قراءته)

كيفية التضمين

ضع الملفات في مجلد root. أضف في <head>: link rel='icon'، apple-touch-icon، manifest.json للـ PWA. مولدنا يعطيك HTML الكامل جاهزاً. اختبر في realfavicongenerator.net. مسح cache بعد التحديث (Ctrl+F5) لرؤية الجديد.

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

ما هو favicon؟
أيقونة صغيرة تظهر في تبويب المتصفح، الإشارات المرجعية، التاريخ. تساعد المستخدمين تمييز موقعك. حجم تقليدي 16×16 و 32×32 px. ضرورية - بدونها، يبدو الموقع غير احترافي. كل المواقع المحترمة لديها favicon.
ما الأحجام المطلوبة؟
favicon.ico (16, 32, 48 متعدد). 180×180 (Apple Touch Icon). 192×192 و 512×512 (Android Chrome). 270×270 (Windows Tile). 32×32 و 16×16 PNG. مولدنا ينشئ كل الأحجام في حزمة واحدة بكليكة واحدة.
كيف أصمم favicon جيد؟
بسيط جداً - لا تفاصيل (تختفي في 16×16). شعار حرف واحد أو رمز. لون واحد بارز. خلفية متباينة. اختبر في تبويب فعلي قبل النشر. تجنب: نص مكتوب، أكثر من عنصرين، تدرجات معقدة، تفاصيل دقيقة.
كيف أضيفه للموقع؟
ضع الملفات في root المجلد. أضف في <head>: <link rel='icon' href='/favicon.ico'>. للأحجام المتعددة: <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. مولدنا يعطيك HTML الكامل جاهزاً للصق.

أدوات ذات صلة