صورة واحدة. كل شاشة.

تحويل SVG إلى أيقونة موقع

أيقونات صغيرة. انطباع يدوم.

حوّل رسومات SVG الآمنة إلى أيقونات ICO وPNG. عاين النتيجة النقطية بأحجام صغيرة وصدّر حزمة الأيقونات محليًا.

PNG ICO PWA

أنشئ حزمة أيقوناتك

حوّل صورتك إلى أيقونات للموقع والتطبيقات والمزيد.

1رفع
2تعديل
3تنزيل

بانتظار صورة

أسقط صورتك هنا

SVG · حتى 5 MB

تُعالج صورتك داخل متصفحك، ولا تغادر جهازك أبدًا.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

اضبط أيقونتك

اضبط المظهر بدقة ليناسب كل شاشة.

ملاءمة الصورة

الخلفية

شفاف

لون موحد

#FFFFFF

مساحة داخلية6%

نصف قطر الزوايا0%

أحجام ICO (يمكن اختيار عدة أحجام)

256

أيقونات قابلة للقناع

شاهدها أثناء الاستخدام(ارفع صورة لمعاينة أيقونتك)

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

https://example.com

الشاشة الرئيسية لـ iOS

أيقونتك هنا

PWA / Android

أيقونتك هنا

إنشاء أيقونة موقع في 3 خطوات

من صورة واحدة إلى مجموعة كاملة من الأيقونات.

1ارفع صورتك

حوّل رسومات SVG الآمنة إلى أيقونات ICO وPNG. عاين النتيجة النقطية بأحجام صغيرة وصدّر حزمة الأيقونات محليًا.

2الضبط والمعاينة

اختر الملاءمة والخلفية والمساحة الداخلية. تحقق من النتيجة بأحجام صغيرة.

3نزّل وأضف إلى موقعك

صدّر حزمة الأيقونات، وارفع الملفات، وأضف روابط الأيقونات إلى HTML.

شعار واحد، جاهز لكل شاشة

انظر أين يتم استخدام الملفات التي تم إنشاؤها.

أيقونة الموقع

موقعي×

16 × 16

32 × 32

تساعد أيقونات 16 × 16 و32 × 32 الزوار على التعرف على موقعك في علامات التبويب والإشارات المرجعية.

iPhone & iPad

موقعي

180 × 180

استخدم أيقونة apple-touch بحجم 180 × 180 عند إضافة موقعك إلى الشاشة الرئيسية.

PWA & Android

تثبيت التطبيق

192 × 192

512 × 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">

فك حزمة الأيقونات في public/ بجذر مشروع Nuxt. احتفظ بأسماء الملفات وضع site.webmanifest بجوار favicon.ico وليس داخل app/.
أضف الكود إلى كتلة script setup في app/app.vue. استبدل روابط الأيقونات القديمة ثم أعد البناء وانشر مشروعك.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

افتح /favicon.ico و/apple-touch-icon.png و/site.webmanifest على موقعك. تحقق من نجاح الاستجابة ومن محتوى صورة أو JSON فعلي؛ استجابة 200 بصفحة خطأ HTML تعني أيضًا مسارًا خاطئًا. تحقق من كل رابط أيقونة داخل البيان.

إذا بقيت الأيقونة القديمة فابحث عن روابط مكررة في head وعطّل التخزين المؤقت من أدوات المطور ثم أعد التحميل. راجع ذاكرة CDN وservice worker إن استُخدمت. قارن معاينات 16 و32 بكسل الفعلية وبسّط النص الصغير والخطوط الرفيعة.

توفر الملفات أيقونات وبيانات البيان فقط ولا تجعل الموقع وحدها PWA قابلة للتثبيت. يفترض المثال النشر في جذر النطاق؛ عدّل كل الروابط ومسارات أيقونات البيان عند النشر في مجلد فرعي.

Nuxt 4 · public/ · Nuxt 4 · useHead

تحويل SVG إلى أيقونة موقع

حوّل رسومات SVG الآمنة إلى أيقونات ICO وPNG. عاين النتيجة النقطية بأحجام صغيرة وصدّر حزمة الأيقونات محليًا.

تبقى مسارات SVG الآمنة متجهة. لا يتم تحويل الصور النقطية وصور النص إلى متجهات.

يجب أن يحتوي SVG على رسومات آمنة ومستقلة عن الموارد الخارجية.

ابدأ الإبداع

الأسئلة المتكررة

ما هي أيقونة الموقع؟

صورة صغيرة تمثل موقعك في علامات تبويب المتصفح والإشارات المرجعية.

أي صيغة صورة أستخدم؟

PNG خيار جيد للشعارات الشفافة. يمكنك أيضًا استخدام JPG وWebP وSVG آمن.

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

نعم. اختر «احتواء» أو «اقتصاص» أو «تمديد» لإنشاء أيقونة مربعة.

لماذا تتضمن الحزمة أحجامًا متعددة للأيقونات؟

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