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

تحويل PNG إلى ICO

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

حوّل PNG إلى ICO بأحجام متعددة. احتفظ بالشفافية وراجع المعاينات الصغيرة ونزّل ملفات الأيقونات محليًا.

PNG ICO PWA

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

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

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

بانتظار صورة

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

PNG · حتى 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ارفع صورتك

حوّل PNG إلى ICO بأحجام متعددة. احتفظ بالشفافية وراجع المعاينات الصغيرة ونزّل ملفات الأيقونات محليًا.

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