أدواتصانع أيقونة الموقع (Favicon)
أنشئ كل الأيقونات التي يحتاجها موقعك من صورة أو بضعة حروف أو إيموجي، وعاينها في تبويب المتصفح وعلى الجوال، ونزّل ملفًا مضغوطًا واحدًا.
كل شيء يعمل داخل متصفحك
ألوانك ونصوصك وصورك لا تُرفع إلى أي مكان.
المعاينة
موقعي
الشاشة الرئيسية في الجوال
الأحجام الفعلية
تحتوي الحزمة على: favicon.ico, favicon.svg, favicon-32.png, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest. يتضمن الملف favicon.svg لأن مصدرك متجه.
الصق هذا داخل <head> صفحاتك
جرّب أيضًا هذه الأدوات
طريقة الاستخدام
- 1اختر المصدر: صورة، أو من حرف إلى ثلاثة حروف، أو إيموجي.
- 2اضبط الشكل والألوان والهامش، وراجع معاينتي تبويب المتصفح والجوال.
- 3اضغط تنزيل لتحصل على ملف zip فيه favicon.ico وأيقونات PNG وملف manifest وغيرها.
- 4ارفع الملفات إلى المجلد الرئيسي لموقعك والصق الكود في ترويسة صفحاتك.
متى تحتاج هذه الأداة؟
موقع جديد
اصنع أيقونة نظيفة من أول حرف في اسم العلامة بخط يطابق موقعك.
مدونة أو معرض أعمال
حوّل شعارك إلى مجموعة فافيكون كاملة في دقيقة دون برنامج تصميم.
تطبيق ويب قابل للتثبيت
احصل على أيقونتي 192 و512 بكسل والنسخة maskable التي يحتاجها ملف manifest.
عنصر مؤقت سريع
استخدم إيموجي ريثما يكتمل تصميم العلامة الحقيقية.
نصائح وحدود مهمة
- اجعلها بسيطة: حرف أو حرفان أو رمز عريض. فالتفاصيل تختفي عند 16 بكسل.
- تحصل أيقونة أبل على خلفية صلبة لأن الآيفون يملأ الشفافية بالأسود. وإذا اخترت خلفية شفافة يُستخدم الأبيض هناك.
- تُرسم الإيموجي بخط الإيموجي في جهازك، فتبدو مختلفة على الأجهزة الأخرى.
- بعد الرفع قد تواصل المتصفحات عرض الأيقونة القديمة فترة. وتظهر الجديدة بإعادة تحميل قوية أو في نافذة خاصة.
كل أيقونة يحتاجها موقعك من مصدر واحد
الفافيكون هو الأيقونة الصغيرة في تبويبات المتصفح والمفضلة ونتائج البحث، والموقع الحديث يحتاج أكثر من ملف واحد. ابدأ من صورة (PNG أو JPG أو WebP أو SVG)، أو من حرف إلى ثلاثة حروف، ومنها حرف عربي بأحد 55 خطًّا من Google Fonts، أو من إيموجي. اختر شكلًا مربعًا أو مستدير الزوايا أو دائريًّا، والألوان والهامش، وشاهد المعاينة في تبويب متصفح فاتح وآخر داكن وعلى شاشة جوال رئيسية وبالأحجام الفعلية 16 و32 و48 بكسل.
يضم الملف المضغوط favicon.ico (بأحجام 16 و32 و48 بكسل)، وfavicon.svg لمصادر النص وSVG، وfavicon-32.png، وapple-touch-icon بحجم 180 بكسل بخلفية صلبة، وicon-192.png وicon-512.png، وأيقونة maskable بمنطقة آمنة، وملف site.webmanifest. ويظهر تحت المعاينة كود جاهز للصق في ترويسة صفحتك. وإن كان شعارك أعرض من ارتفاعه فـاقصصه إلى مربع أولًا، وإن كان ملف المصدر ثقيلًا فاستخدم أداة ضغط الصور. واختر الخلفية بـمولّد اللوحات، واتبع دليل كيف تصنع فافيكون لخطوات الرفع.
شروحات خطوة بخطوة
الأسئلة الشائعة
كيف أصنع فافيكون؟
اختر صورة أو حروفًا أو إيموجي، واضبط الشكل والألوان، ونزّل الملف المضغوط. ارفع الملفات إلى جذر موقعك والصق الكود في الترويسة.
ما الملفات التي أحصل عليها؟
favicon.ico وfavicon-32.png وapple-touch-icon.png وicon-192.png وicon-512.png وicon-maskable-512.png وsite.webmanifest، وfavicon.svg لمصادر النص وSVG.
هل أستخدم حرفًا عربيًّا؟
نعم. اختر أي خط عربي من القائمة، ويضم favicon.svg الحروف التي يحتاجها فقط فيبدو واحدًا في كل مكان.
ما مقاس الصورة المصدر؟
تعمل الصورة المربعة بحجم 512 × 512 بكسل على الأقل أفضل. وSVG مثالي لأنه يتحجّم دون ضبابية.
هل تُرفع صورتي؟
لا. تُرسم الأيقونات وتُضغط في متصفحك. وفافيكون النص وحده يتصل بـGoogle Fonts لجلب الحروف التي يستخدمها.