مولد أيقونة الموقع وأيقونة التطبيق

حمِّل صورة (PNG, JPG, GIF) وأنشئ مجموعة كاملة من الأيقونات لموقعك: favicon.ico (بأحجام متعددة)، أيقونات Android Chrome (192×192، 512×512)، أيقونة Apple Touch (180×180)، وأيقونات favicon القياسية (16×16، 32×32). يتم تجميع جميع الملفات في أرشيف ZIP. 100% على جهاز العميل – صورتك لا تغادر جهازك أبداً.

1. ارفع

اختر أي صورة PNG أو JPG أو GIF.

2. أنشئ

انقر "إنشاء الأيقونات" – نقوم بإنشاء جميع الأحجام.

3. حمِّل

انقر زر "تنزيل الأيقونات (ZIP)" لحفظ الملف المضغوط.

100% على جهازك

بدون رفع، بدون خادم، صورتك تبقى خاصة.

الأيقونات المضمنة: favicon.ico (16,32,48)، favicon-16x16.png، favicon-32x32.png، android-chrome-192x192.png، android-chrome-512x512.png، apple-touch-icon.png (180×180). جميعها تُقصَّ إلى مربع مركزي.

تعليمات التثبيت

بعد تنزيل الملف المضغوط، قم بفك ضغطه واتبع الخطوات التالية لإضافة الأيقونات إلى موقعك.

1. ضع الملفات في المجلد الجذري لموقعك

الملفات التالية مضمنة في الملف المضغوط:

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico

ملاحظة : ملف site.webmanifest لا يُنشأ تلقائياً، لكن يمكنك إنشاؤه يدوياً (انظر المثال أدناه).

2. أضف وسوم HTML التالية داخل `<head>` لموقعك

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

3. (اختياري) أنشئ ملف `site.webmanifest`

إذا أردت استخدام بيان تطبيق الويب، أنشئ ملفاً باسم site.webmanifest في المجلد الجذري بمحتوى مشابه لهذا:

{
    "name": "اسم تطبيقك",
    "short_name": "التطبيق",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

4. تحقق من أيقوناتك

بمجرد وضع الملفات وتحديث HTML، امسح ذاكرة التخزين المؤقت للمتصفح وأعد تحميل موقعك. يمكنك استخدام أدوات فحص الفافيكون عبر الإنترنت للتأكد من تحميل جميع الأيقونات بشكل صحيح.

تصميم أيقونات

مولد أيقونة الموقع وأيقونة التطبيق

تعليمات التثبيت

1. ضع الملفات في المجلد الجذري لموقعك

2. أضف وسوم HTML التالية داخل `<head>` لموقعك

3. (اختياري) أنشئ ملف `site.webmanifest`

4. تحقق من أيقوناتك

أدوات تصميم الأيقونات أونلاين

مولد أيقونة الموقع وأيقونة التطبيق

تعليمات التثبيت

1. ضع الملفات في المجلد الجذري لموقعك

2. أضف وسوم HTML التالية داخل <head> لموقعك

3. (اختياري) أنشئ ملف site.webmanifest

4. تحقق من أيقوناتك

أدوات تصميم الأيقونات أونلاين

2. أضف وسوم HTML التالية داخل `<head>` لموقعك

3. (اختياري) أنشئ ملف `site.webmanifest`