مولّد أصول الأيقونة المفضّلة (Favicon)

أنشئ حزمة أيقونات مفضّلة كاملة — ICO وصور PNG وأيقونة Apple touch وأيقونات PWA وملف web manifest ومقتطف HTML — محلياً في متصفحك.

الصورة المصدر
اسحب أو اختر ملف PNG أو JPEG أو WebP أو SVG. ستستخدم جميع المنصات هذه الصورة ما لم تتجاوزها أدناه.
معلومات الموقع
تُستخدم في الـ manifest وفي apple-touch-icon ومقتطف HTML.

يُعرض عندما يكون اسم التطبيق طويلاً جداً على الواجهة.

اختياري. يُحذف من الـ manifest عند تركه فارغاً.

المكان الذي يفتح فيه تطبيق الـ PWA المُثبَّت.

بادئة تُطبَّق على كل href في مقتطف HTML وعلى كل src في مصفوفة الأيقونات داخل الـ manifest.

يحدّد قيمة theme_color في الـ manifest ووسم HTML <meta name="theme-color">.

قيمة background_color في الـ manifest. تستخدمها المتصفحات لرسم شاشات البداية في تطبيقات الـ PWA.

أيقونة متصفح سطح المكتب
تتحكّم في favicon.ico وfavicon-16x16.png وfavicon-32x32.png و(عندما يكون المصدر SVG) favicon.svg.

مساحة بصرية مريحة حول الصورة المصدر داخل الأيقونة.

تبويب متصفح سطح المكتب
تبويب متصفح سطح المكتب (dark)
نتيجة محرك بحث
أيقونة iOS web clip
تتحكّم في apple-touch-icon.png بحجم 180×180 المستخدمة على الشاشات الرئيسية لنظام iOS.

يجب أن تكون أيقونات Apple معتمة، لذلك يُطبَّق هذا التعبئة دائماً.

مساحة بصرية مريحة حول الصورة المصدر داخل الأيقونة.

الشاشة الرئيسية لنظام iOS
أيقونات PWA
تتحكّم في pwa-192x192.png وpwa-512x512.png والنسخ القابلة للقَنْع (maskable).

مساحة بصرية مريحة حول الصورة المصدر داخل الأيقونة.

المنطقة الآمنة التي يوصي بها W3C هي 40%. يظل محتوى المصدر مرئياً داخل أي قناع تستخدمه المنصّة.

شريط مهام Windows
مشغّل تطبيقات Android
الحزمة المولَّدة
اضغط على ”توليد“ لعرض كل الأصول وبناء ملف zip ونسخ مقتطف HTML.
لا توجد حزمة بعد
اختر صورة واضغط ”توليد“ لتجميع حزمة الأيقونة المفضّلة.

ما الذي تنشئه هذه الأداة

يحوّل هذا المولّد صورة واحدة إلى حزمة أيقونات مفضّلة (favicon) كاملة وعصرية — ملف .ico متعدد الأحجام للمتصفحات القديمة، ومتغيّرات PNG بأحجام 16 / 32 / 180 / 192 / 512، وملف .svg أصلي اختياري، وملف site.webmanifest لتطبيقات الويب التقدّمية (PWA)، بالإضافة إلى مقتطف HTML الذي تلصقه داخل وسم <head>. تُنتَج كل بايت داخل متصفحك؛ بلا رفع، ولا خادم، ولا تتبّع تحليلي.

ما الذي تحتويه الحزمة

  • favicon.ico — متعدد الصور (16 / 32 / 48) لتبويبات المتصفح والإشارات المرجعية واختصارات Windows القديمة.
  • favicon-16x16.png و favicon-32x32.png — متغيّرات PNG العصرية المستخدمة في المتصفحات الحالية.
  • favicon.svg — يُضمَّن فقط عندما تكون صورة المصدر بصيغة SVG ويكون مفتاح “استخدام SVG الأصلي” مفعّلًا.
  • apple-touch-icon.png — بقياس 180×180، معتم، يُستخدَم في شاشات iOS الرئيسية.
  • pwa-192x192.png و pwa-512x512.png — أيقونات PWA القياسية.
  • pwa-maskable-192x192.png و pwa-maskable-512x512.png — متغيّرات قابلة للقص (maskable) مع منطقة آمنة موصى بها من قِبَل W3C.
  • site.webmanifest — ملف بيان PWA المربوط بالأيقونات أعلاه.

كيف تعمل الحشوة والخلفية ومناطق الأمان للأيقونات القابلة للقص

لكل منصّة حشوتها الخاصة (“الهامش”) حتى تترك مساحة تنفّس داخل لوحة الأيقونة. يرسم مفتاح “إضافة خلفية” مربّعًا معتمًا خلف صورة المصدر — وهو مفيد عندما يكون المصدر شفافًا وتشترط الوجهة أن يكون معتمًا (شاشة iOS الرئيسية من Apple)، أو لمجرد إبراز التباين البصري في تبويب المتصفح. تستخدم أيقونات PWA القابلة للقص منطقة أمان إضافية فوق هامش المنصّة: أي شيء خارج النسبة المركزية ~80% قد يُقتطَع بواسطة Android أو Windows أو ChromeOS عند تطبيق قناع دائري أو مستدير الزوايا أو على شكل سكوركل (squircle).

ربط الحزمة بموقعك

  1. فُكّ ضغط الأرشيف الذي نزّلته داخل جذر موقعك (بحيث تكون الملفات على المسارات /favicon.ico و /site.webmanifest وما إلى ذلك).
  2. الصق مقتطف HTML داخل وسم <head> في موقعك.
  3. إذا كنت تقدّم الملفات الثابتة من مسار فرعي (مثلًا /static/icons/)، فاضبط “مسار الأصول” قبل التوليد كي يستخدم المقتطف والبيان الروابط الصحيحة.
  4. إذا خصّصت ملف البيان بما يتجاوز ما تتيحه هذه الأداة (مثلًا لإضافة categories أو screenshots)، افتح ملف site.webmanifest في محرّر نصوص وعدّله مباشرة — فهو ملف JSON نصّي عادي.