إنشاء أيقونة موقع (Favicon) في ثوانٍ
أيقونة الموقع (Favicon) هي الرمز الصغير الذي يظهر في علامات تبويب المتصفح، والإشارات المرجعية، وسجل التصفح، ونتائج البحث على الهاتف المحمول، وعلى الشاشة الرئيسية عندما يحفظ شخص ما موقعك. تساعد الزوار في العثور على علامة التبويب الخاصة بك من بين العشرات، وتجعل حتى المواقع الصغيرة تبدو احترافية ومكتملة. تقوم أداة إنشاء أيقونات المواقع هذه بإنشاء كل ملف تحتاجه من صورة واحدة — أو من حرف أو رمز تعبيري إذا لم يكن لديك شعار بعد — وتمنحك كود HTML لإضافتها إلى موقعك.
الميزات
- من صورة: PNG، JPG، SVG، WebP وغيرها.
- من نص أو رمز تعبيري: أحرف أولى أو رمز تعبيري على خلفية ملونة.
- زوايا دائرية وهوامش داخلية لتناسب الأيقونة بشكل جميل في علامات التبويب والشاشات الرئيسية.
- معاينة مباشرة بمقاسات 16 و 32 و 64 و 128 بكسل.
- حزمة كاملة: ملف favicon.ico متعدد المقاسات، أيقونات PNG، أيقونة Apple touch، أيقونات Android، وملف web manifest.
- وسوم HTML جاهزة للنسخ.
- الخصوصية: يتم الإنشاء بالكامل داخل متصفحك.
شرح مقاسات أيقونة الموقع (Favicon)
| الملف | المقاس | الاستخدام |
|---|---|---|
| favicon.ico | 16, 32, 48 px | جميع المتصفحات، اختصارات Windows، دعم المتصفحات القديمة |
| favicon-16x16.png | 16 px | علامات تبويب المتصفح |
| favicon-32x32.png | 32 px | علامات التبويب في الشاشات عالية الدقة، شريط المهام |
| apple-touch-icon.png | 180 px | الشاشة الرئيسية لأجهزة iPhone و iPad |
| android-chrome-192x192.png | 192 px | الشاشة الرئيسية لأجهزة Android |
| android-chrome-512x512.png | 512 px | شاشة البداية في Android، تثبيت تطبيقات PWA |
نصائح للتصميم
- التبسيط. استخدم رمز شعارك، وليس الشعار الكامل الذي يحتوي على اسم الشركة.
- استخدم التباين. يجب أن تكون الأيقونة بارزة في كل من سمات المتصفح الفاتحة والداكنة.
- اختبر بحجم 16 px. إذا لم تتمكن من التعرف عليها في أصغر معاينة، فقم بتبسيطها أكثر.
- املأ المربع. الأيقونات التي تحتوي على مساحة فارغة كبيرة تبدو صغيرة جداً في علامات التبويب؛ لذا قلل الهوامش الداخلية.
أدوات ذات صلة
حول الشعار المتجه إلى صورة PNG عالية الدقة أولاً باستخدام تحويل SVG إلى PNG، أو قم بتغيير حجم صورة موجودة باستخدام تغيير حجم الصورة، أو حول بين صيغ الصور باستخدام محول الصور.