مولد وسوم الأيقونة Favicon
حدد مجلد الأيقونات واسم الموقع ولونه لتحصل على وسوم head جاهزة وملف manifest.webmanifest.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
طريقة الاستخدام
- أدخل مجلد الأيقونات، اسم الموقع، لون الواجهة (HEX)، أضف أيقونة SVG وأضف ملف manifest.
- تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
- انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.
طريقة الحساب
مجموعة حديثة مختصرة: favicon.ico بمقاس 32×32، وأيقونة SVG، وapple-touch-icon بمقاس 180×180، وملف manifest يشير إلى PNG بمقاسي 192×192 و512×512، ووسم theme-color.
مثال
المدخلات: مجلد الأيقونات = /، اسم الموقع = My Site، لون الواجهة (HEX) = #0f766e، أضف أيقونة SVG = نعم، أضف ملف manifest = نعم. النتيجة: وسوم head: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#0f766e">.
/
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#0f766e">
الحدود والملاحظات
- الأداة تكتب الوسوم فقط، وعليك تجهيز ملفات الصور بالمقاسات المذكورة.
- لون الخلفية في manifest أبيض افتراضيا، فعدّله إذا كان تصميمك داكنا.
أسئلة شائعة عن هذه الأداة
لماذا sizes="32x32" مع ملف ico؟
لأن بعض إصدارات Chrome تختار ملف ico بدل SVG إذا كُتب sizes="any"، فتحديد 32x32 يجعل المتصفح يفضّل SVG.
هل أحتاج إلى عشرات المقاسات؟
لا، هذه الملفات الخمسة تغطي المتصفحات الحديثة وأجهزة Apple وأندرويد.
أين أضع الوسوم؟
داخل وسم head في كل صفحة، ويفضّل وضع ملف favicon.ico في جذر الموقع أيضا.