Tools Hub
EnglishEspañol
أداة في الصور

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

أنشئ حزمة أيقونات فافيكون كاملة لجميع الأجهزة والمتصفحات بنقرة واحدة داخل المتصفح.

ابدأ الأداةكل أدوات الصور

الخصوصية: تجري معالجة وإنشاء جميع مقاسات الأيقونات محليًا داخل المتصفح بنسبة 100%، دون رفع شعاراتك أو صورك إلى أي خادم خارجي.

واجهة الأداة بالإنجليزية

الأزرار والحقول داخل المساحة أدناه بالإنجليزية حتى تُترجم الواجهة. الشرح والخطوات والأسئلة حولها بالعربية، ويمكنك الكتابة بالعربية مباشرة في حقول النص.

Open the English page
Ready-Made Favicon Presets:

Favicon Customizer

Icon Source:
Icon Shape:
Background Color:#3B82F6
Inner Padding:10%
Web Manifest App Metadata:
Short Name:
Complete Favicon Package (.ZIP)Includes multi-size ICO, all PNGs, webmanifest, and HTML head tags.

Real-World Context Previews

Browser Tab Preview:
My Awesome App×
Mobile Screen Preview:
App180×180 Apple Touch

Generated Individual Files

Download individual icons
favicon.ico16×16, 32×32, 48×48 Multi-ICO
favicon-16x16.png16×16 • Browser Tab (Small)
favicon-32x32.png32×32 • Browser Tab (Standard)
favicon-48x48.png48×48 • Desktop Shortcut
apple-touch-icon.png180×180 • Apple Touch Icon (iOS)
android-chrome-192x192.png192×192 • Android Home Screen
android-chrome-512x512.png512×512 • PWA Splash & High-Res

HTML <head> Tags

Paste inside your HTML header
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Continue in Next Tool (Pipeline)

Transfer this output directly into complementary tools without re-uploading

يُنشئ صانع أيقونات المواقع حزمة فافيكون شاملة ومتوافقة مع مختلف متصفحات الويب وشاشات الهواتف الذكية وتطبيقات الويب التقدمية (PWA) في ثوانٍ معدودة. وسواء بدأت بشعار مؤسستك، أو صورة رمزية، أو رمز تعبيري (إيموجي)، أو حرف مونوغرام أنيق، يولّد المنشئ كافة المقاسات القياسية المعتمدة عالميًا. تتضمن الحزمة أيقونات التبويبات الكلاسيكية، واختصارات سطح المكتب، وأيقونة أجهزة آبل (Apple Touch Icon) لهواتف آيفون وأجهزة آيباد، وأيقونات أندرويد فائقة الدقة. وتندمج جميعها في ملف favicon.ico متعدد الأحجام مع ملف site.webmanifest وشفرة وسوم head الجاهزة للنسخ، مع إتاحة تنزيل الكل في ملف ZIP فوريًا محليًا داخل متصفحك بأعلى درجات الخصوصية.

كيف تستخدم توليد أيقونة الموقع Favicon

  1. حدد مصدر الأيقونة: رفع ملف صورة أو شعار، أو اختيار رمز تعبيري، أو كتابة حرف مونوغرام.
  2. اضبط إطار الخلفية ولونها ودرجة الهامش الداخلي وفق هويتك البصرية.
  3. عاين مظهر الأيقونة مباشرة داخل نموذج محاكاة لتبويب المتصفح وشاشات الهواتف.
  4. نزّل الأيقونات الفردية أو اضغط تنزيل الحزمة الكاملة (.zip) للحصول على كافة الملفات مجمعة.

ما تحصل عليه

  • ملف favicon.ico متعدد الطبقات يجمع مقاسات 16x16 و 32x32 و 48x48 لضمان التوافقية الشاملة.
  • حزمة صور PNG بأبعاد 16px و 32px و 48px و 180px للآيفون و 192px و 512px للأندرويد.
  • ملف site.webmanifest مهيأ لمتصفحات الهواتف وتثبيت تطبيقات الويب المتقدمة.
  • ملف مضغوط ZIP يحتوي على كافة الأيقونات وكود HTML الجاهز للنسخ في ترويسة موقعك.

متى تستخدم توليد أيقونة الموقع Favicon

  • تجهيز حزمة أيقونات متكاملة للمواقع الإلكترونية والمتاجر ومنصات البرمجيات الجديدة.
  • تحويل شعار الشركة إلى ملف favicon.ico متعدد الطبقات وأيقونات شاشة الهاتف الرئيسية.
  • تصميم فافيكون سريع بالحروف أو الرموز التعبيرية للمشاريع الأولية والنماذج السريعة.
  • توليد ملفات manifest وتجهيز متطلبات تطبيقات الويب التقدمية PWA دون برامج تصميم معقدة.

أسئلة شائعة عن توليد أيقونة الموقع Favicon

ما هي الملفات المضمنة في حزمة الفافيكون الكاملة؟

تتضمن الحزمة ملف favicon.ico قياسي متعدد المقاسات، وصور PNG بمقاسات 16 و 32 و 48 و 180 و 192 و 512 بكسل، وملف site.webmanifest مع دليل وسوم التثبيت.

لماذا لا تزال هناك حاجة لملف favicon.ico بجانب صور PNG؟

رغم دعم المتصفحات الحديثة لصور PNG و SVG، تبحث بعض الأنظمة القديمة وأدوات شريط المهام عن ملف /favicon.ico في المسار الجذري تلقائيًا لضمان التوافق التام.

كيف أثبت الفافيكون على الموقع بعد التنزيل؟

فكّ ضغط ملف ZIP وضع الملفات في المجلد الجذري للموقع (أو مجلد public)، ثم انسخ وسوم HTML التوضيحية والصقها داخل وسم <head> في صفحاتك.

أدوات عربية ذات صلة

⚡تضمين أداة توليد أيقونة الموقع Favicon في موقعك مع الشارة (Embed & Badge)↓

انسخ كود التضمين أو الشارة لإضافة الأداة إلى موقعك أو مدونتك أو ملفات README مع شارة اعتماد خفيفة وسريعة.

الارتفاع:
<iframe src="https://salaq.com/embed/image/favicon-generator" title="توليد أيقونة الموقع Favicon — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">مشغل بواسطة <a href="https://salaq.com/ar/tools/image/favicon-generator" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">أداة توليد أيقونة الموقع Favicon من Tools Hub</a></p>

العودة إلى الصور