Icon Workshop1ارفع صورتك
ابدأ بشعار واضح أو رمز بسيط. الصورة المربعة تعطي أفضل نتيجة.
صورة واحدة. كل شاشة.
مولّد أيقونات المواقع والتطبيقات
أيقونات صغيرة. انطباع يدوم.
حوّل صورتك إلى أيقونات للموقع والتطبيقات وحزمة أيقونات جاهزة للاستخدام.
PNG ICO PWA
أنشئ حزمة أيقوناتك
حوّل صورتك إلى أيقونات للموقع والتطبيقات والمزيد.
- 1رفع
- 2تعديل
- 3تنزيل
أسقط صورتك هنا
PNG أو JPG أو SVG · ما يصل إلى 5 MB
تُعالج صورتك داخل متصفحك، ولا تغادر جهازك أبدًا.
اضبط أيقونتك
اضبط المظهر بدقة ليناسب كل شاشة.
شاهدها أثناء الاستخدام(ارفع صورة لمعاينة أيقونتك)
علامة تبويب المتصفح
×
https://example.com
الشاشة الرئيسية لـ iOS
أيقونتك هنا
PWA / Android
أيقونتك هنا
إنشاء أيقونة موقع في 3 خطوات
من صورة واحدة إلى مجموعة كاملة من الأيقونات.
2الضبط والمعاينة
اختر الملاءمة والخلفية والمساحة الداخلية. تحقق من النتيجة بأحجام صغيرة.
3نزّل وأضف إلى موقعك
صدّر حزمة الأيقونات، وارفع الملفات، وأضف روابط الأيقونات إلى HTML.
شعار واحد، جاهز لكل شاشة
انظر أين يتم استخدام الملفات التي تم إنشاؤها.
أيقونة الموقع
موقعي×16 × 1632 × 32تساعد أيقونات 16 × 16 و32 × 32 الزوار على التعرف على موقعك في علامات التبويب والإشارات المرجعية.
iPhone & iPad
موقعي180 × 180استخدم أيقونة apple-touch بحجم 180 × 180 عند إضافة موقعك إلى الشاشة الرئيسية.
PWA & Android
تثبيت التطبيق192 × 192512 × 512الصور بحجم 192 × 192 و512 × 512 من الأحجام الشائعة في ملفات بيان تطبيقات الويب.
ماذا تتضمن حزمة الأيقونات؟
مجموعة جاهزة للاستخدام من الأيقونات لجميع المنصات.
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestملف بيان تطبيق الويب
أضف الأيقونات إلى موقعك
ضع هذه الروابط في HTML <head> الخاص بك.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">الأسئلة المتكررة
ما هي أيقونة الموقع؟
صورة صغيرة تمثل موقعك في علامات تبويب المتصفح والإشارات المرجعية.
أي صيغة صورة أستخدم؟
PNG خيار جيد للشعارات الشفافة. يمكنك أيضًا استخدام JPG وWebP وSVG آمن.
هل يمكنني استخدام صورة غير مربعة؟
نعم. اختر «احتواء» أو «اقتصاص» أو «تمديد» لإنشاء أيقونة مربعة.
لماذا تتضمن الحزمة أحجامًا متعددة للأيقونات؟
تستخدم المتصفحات والشاشات الرئيسية أحجامًا مختلفة. تبقى الأيقونات الصغيرة واضحة في علامات التبويب، وتناسب الكبيرة اختصارات التطبيقات.