مولد favicon

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

ارفع صورة المصدر

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

معاينة الحزمة

تبويب جديد

16x16

Web

32x32

Web

48x48

Legacy

Apple Touch

180x180

Apple Touch

مقتطف HTML

<!-- Add inside <head> -->
<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">

أفضل ممارسات favicon

ابدأ بصورة مربعة

تعمل الأيقونات الصغيرة بشكل أفضل عندما يكون الشعار في المنتصف مع مساحة كافية حوله.

اختبر الخلفية

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

أضف المقتطف إلى الصفحة الرئيسية

ضع روابط الأيقونات في head حتى تقرأها المتصفحات ومحركات البحث عند زيارة الموقع.

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

16x16 / 32x32

تبويبات المتصفح

هذه المقاسات تظهر بجانب عنوان الصفحة وفي الإشارات المرجعية.

180x180

Apple Touch

يستخدم هذا المقاس عند حفظ الموقع على شاشة جهاز iOS الرئيسية.

192x192 / 512x512

أيقونات تطبيق الويب

تفيد هذه المقاسات في manifest وتجارب PWA عندما يكون الموقع قابلًا للإضافة للشاشة الرئيسية.

دليل تثبيت سريع

نزّل الحزمة

احفظ ملف ZIP وافتحه داخل مشروع الموقع الثابت.

انسخ الملفات

ضع ملفات الأيقونات بجانب الصفحة الرئيسية أو داخل مجلد public حسب بنية المشروع.

اختبر الرابط العام

بعد النشر، افتح رابط HTTPS وتأكد أن التبويب ومعاينة المشاركة يعرضان الأيقونة الصحيحة.